PDF转JPG网页中GlobalWorkerOptions与jsPDF加载问题求助

以下是排查和解决Uncaught ReferenceError: jsPDF is not defined错误的几个关键点：

• 确认jsPDF库已正确引入
  你需要通过script标签引入jsPDF的CDN资源，或者本地文件。比如使用官方推荐的CDN：

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
  

  如果是本地下载的库文件，检查文件路径是否和script标签的src属性一致，路径错误会导致库加载失败。

• 调整库的加载顺序
  必须把jsPDF的script标签放在你的自定义脚本之前，保证在执行调用jsPDF的代码时，库已经完全加载。比如：

  <!-- 先引入jsPDF -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
  <!-- 再放你的业务脚本 -->
  <script src="your-custom-script.js"></script>
  

• 适配新版jsPDF的全局对象
  较新的umd版本jsPDF不会直接把jsPDF挂载到window全局对象，而是放在window.jspdf下面。你需要先解构获取构造函数：

  const { jsPDF } = window.jspdf;
  // 之后正常使用
  const doc = new jsPDF();
  

• 检查模块化环境的导入方式
  如果你用的是ES6模块化开发（比如Vue/React项目），要确保正确导入：

  import { jsPDF } from 'jspdf';
  

修正后的示例代码片段 #

<!DOCTYPE html>
<html>
<head>
    <title>PDF to JPG to PDF</title>
    <!-- 引入pdfjs-dist -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
    <!-- 引入jsPDF -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
</head>
<body>
    <input type="file" id="pdfInput" accept=".pdf">
    <button id="convertBtn">Convert to JPG</button>
    <button id="exportBtn">Export as PDF</button>
    <div id="imageContainer"></div>

    <script>
        // 配置pdfjs worker
        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
        
        // 获取jsPDF构造函数
        const { jsPDF } = window.jspdf;

        let convertedImages = [];

        // PDF转JPG逻辑
        document.getElementById('convertBtn').addEventListener('click', async () => {
            const fileInput = document.getElementById('pdfInput');
            const file = fileInput.files[0];
            if (!file) return;

            const arrayBuffer = await file.arrayBuffer();
            const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
            convertedImages = [];

            for (let i = 1; i <= pdf.numPages; i++) {
                const page = await pdf.getPage(i);
                const viewport = page.getViewport({ scale: 2 });
                const canvas = document.createElement('canvas');
                const ctx = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;

                await page.render({ canvasContext: ctx, viewport: viewport }).promise;
                const imgData = canvas.toDataURL('image/jpeg', 0.9);
                convertedImages.push(imgData);
                
                // 显示转换后的图片
                const img = document.createElement('img');
                img.src = imgData;
                img.style.maxWidth = '100%';
                document.getElementById('imageContainer').appendChild(img);
            }
        });

        // 导出为PDF逻辑
        document.getElementById('exportBtn').addEventListener('click', () => {
            if (convertedImages.length === 0) {
                alert('请先转换PDF为图片');
                return;
            }

            const doc = new jsPDF('p', 'mm', 'a4');
            const pageWidth = doc.internal.pageSize.getWidth();
            const pageHeight = doc.internal.pageSize.getHeight();

            convertedImages.forEach((imgData, index) => {
                if (index > 0) doc.addPage();
                const img = new Image();
                img.src = imgData;
                const imgWidth = pageWidth;
                const imgHeight = (img.height * imgWidth) / img.width;
                doc.addImage(imgData, 'JPEG', 0, 0, imgWidth, imgHeight);
            });

            doc.save('rearranged.pdf');
        });
    </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者PowerPoint Trenton