Vue3工程中在WebWorker内运行jsPDF案例

背景：业务场景需要在前端将 img转换为pdf，但是如果img太大会导致页面渲染卡顿，遂将img获取到后丢到WebWorker中进行转换，当PDF转换完再去做异步后续处理。

1.在Public文件夹下，引入jspdf的umd版本，创建WebWorker JS 文件（public文件在dist打包后路径依然存在，可以获取到WebWorker JS文件，取决于自己所用的框架）

• 引入jspdf.umd.js 下载地址
• 创建WebWorker JS (只能通过importScripts来引入js库)

importScripts(
  "./jsPDF/jspdf.umd.js",
);
// worker.js
onmessage = function (e) {
  let jsPDF = jspdf.jsPDF

  // 定义一个函数将img base64数组转换为pdf base64串
  function convertToPdf(imgArray) {
    let pdf = new jsPDF({ compress: true });
    let imgData = imgArray;

    // 循环将每张图片添加到pdf中
    for (let i = 0; i < imgData.length; i++) {
      // let img = new Image();
      // img.src = imgData[i];

      pdf.addImage(imgData[i], 'PNG', 0, 0, 210, 297); // A4纸尺寸
      if (i !== imgData.length - 1) {
        pdf.addPage();
      }
    }

    // 将pdf转换为base64串
    let pdfBase64 = pdf.output('datauristring');
    return pdfBase64;
  }

  // 根据传入IMG[]转换PDF
  const pdfBase64 = convertToPdf(e.data.ImagesData);
  // 发送结果回主线程
  postMessage(pdfBase64 );
};

• 引用层级关系如下
  

2.在主进程js内调用

        if (typeof Worker !== 'undefined') {
          // 创建一个新的 Worker 线程
          // httpAddress 为实际的域名
          var myWorker = new Worker(httpAddress + 'WebWorker/PdfWorker.js');

          // 发送消息到 Worker
          myWorker.postMessage({ 
            ImagesData: imgData,
          });
          // 监听来自 Worker 的消息
          myWorker.onmessage = function (e) {
            // ...处理逻辑
            // 销毁worker
            myWorker.terminate();
          };
        }

上述方法应该同样适用于React工程内。