codbad

html2canvas 性能优化方案有哪些？

项目中多处使用到 PDF 打印功能，我之前采用的实现方案是： 1 先在 html 上渲染出来 2 通过 html2canvas 转换为 canvas 3 通过 canvas.toDataURL 转换为 jpeg 图片 URL 4 通过 jspdf 创建 PDF 并添加转换来的 jpeg PDF 模板中各元素尺寸是根据数据灵活变换的，考虑到纸张大小，换页，布局等问题，通过 html2canvas 将页面元素转换为 canvas 的时要根据实际情况进行多次转换生成包一个含多张图片的列表。jspdf 再根据图片列表逐一添加。 现在问题就来了，虽然功能已经实现，但 html2canvas 是异步操作，而且非常耗时，当页面只需要转换一两张图片的时候勉强还可以接受，但是当图片的数量越来越多，十张左右的时候就要二十多秒了。 为了优化这个问题，我查找并尝试了几种方法均已失败告终，方法和失败原因如下： 1 html2canvas 官网提供的 ignoreElements 根据介绍，ignoreElements 可以用来排除掉不需要被截图(转换为canvas)的 html 子元素，以便减少 html2canvas 遍历 HTML 元素的时间。但在我的项目中，因为前面提到的考虑换页等问题，已经对 html2canvas 转换的元素粒度降到最细了。没有可排除打印的子元素。 2 Promise.all 多个异步并行， 不知道是因为浏览器限制还是因为线程的资源上限，虽然在代码逻辑上多个 html2canvas 已经是并行处理了，但实际使用时间并没有减少，而且从F12的性能上看，多个 html2canvas 最终还是逐一执行的 3 web worker 后台线程处理 既然在同一个线程里没办法做到真正的并行处理，第一时间想到的就是 web worker 甚至可以使用多个 web worker 启用后台线程并行处理，但是 html2Canvas 是根据 DOM 元素进行操作处理，而 web worker 是没法访问 Dom 的，所以 html2Canvas 好像又不能放到后台线程中处理。 进行到这里就没了头绪，接下来该怎么做希望有遇到过这个问题的前辈给个方向，不胜感激。

脑洞大咖

PDF翻页以及文字定位？

vue使用pdf怎么监听他的翻页和文字定位的事件？ 我在网上找了一些帖子都是利用iframe做的 除了这个方法还有其他办法吗 还有pdf.js和pdf-dist.js不是一个东西吗？？？ "image.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241104/cfec09747235387bd3abab42fed4787b.png) 是这种翻页 不是只渲染一页然后下一页 这个页面就变成了第二页而是整个渲染然后去进行翻页

文文问问

PDF.js 转 canvas 页面不平铺的问题?

使用PDF.js 转成canvas放到页面上不会平铺 目前效果是: "image.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241108/1519c0d8d3a11ad6f24697ae7ceceab2.png) 期望实现的效果: "image.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241108/630052c5d7a5d1be116935fe85f86fa4.png) 请问各位社区大佬应该怎么去解决？ function renderPage(num: number) { pdfDoc.getPage(num).then((page: any) => { const canvas: any = document.getElementById(`pdfSource${num}`) const ctx = canvas.getContext('2d') const dpr = window.devicePixelRatio || 1 const bsr = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1 const ratio = dpr / bsr const viewport = page.getViewport({ scale: state.pdfScale }) canvas.width = viewport.width canvas.height = viewport.height state.pdfWidth = `${viewport.width}px` ctx.setTransform(ratio, 0, 0, ratio, 0, 0) // 将 PDF 页面渲染到 canvas 上下文中 const renderContext = { canvasContext: ctx, viewport } page.render(renderContext) }) } 目前代码是这样的缩放倍率为1 * pdf.js的版本是3.2.146 * vue3+ts+vite

半寸时光爱思考

移动端 企微自建应用 把pdf文件放到前端项目的static下 然后用iframe访问地址static/pdf/web/viewer.html 本地可以 电脑和手机uat都不行 是为什么？

移动端 企微自建应用 把pdf文件放到前端项目的static下 然后用iframe访问地址static/pdf/web/viewer.html 本地（桌面云内部 ）可以 电脑uat（桌面云外）和手机上访问uat都不行 是为什么？ 报错 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec. Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/octet-stream". Strict MIME type checking is enforced for module scripts per HTML spec 搜了下是说网页中使用了模块脚本（module script），但服务器返回的 MIME 类型是 “text/html”，而不是 JavaScript 类型。根据 HTML 规范，严格的 MIME 类型检查会对模块脚本进行强制执行。 看了页面script应该是这两个地方 "企业微信截图_16998474767847.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241015/33e6aa5d196423437b5db748ec62bec4.png) 但是不知道该怎么改