pdf.js 相关问题

我正在尝试创建一个 HTML 网页，可以将 PDF 文件转换为 JPG 图像，然后将重新排列的页面导出为新的 PDF 文件。代码如下：我正在尝试创建一个 HTML 网页，可以将 PDF 文件转换为 JPG 图像，然后将重新排列的页面导出为新的 PDF 文件。代码如下： <!DOCTYPE html> <html> <head> <title>PDF pages rearranger</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script> <style> /* Define the style for the container element */ #container { width: 600px; height: 400px; border: 1px solid black; margin: 20px auto; overflow: auto; } /* Define the style for the image elements */ img { width: 100px; height: 100px; margin: 10px; cursor: move; /* Change the cursor to indicate that the images are draggable */ } </style>  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> </head> <body> <input type="file" id="fileInput" accept=".pdf" /> <button id="convertButton">Convert to JPG</button>  <div id="container"></div>  <button id="exportButton">Export as PDF</button> <script> // Set the GlobalWorkerOptions.workerSrc property window.GlobalWorkerOptions = { workerSrc: 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.worker.min.js' }; const fileInput = document.getElementById('fileInput'); const convertButton = document.getElementById('convertButton'); const container = document.getElementById('container'); const exportButton = document.getElementById('exportButton'); convertButton.addEventListener('click', async () => { const file = fileInput.files[0]; if (!file) { alert('Please select a PDF file first'); return; } // Clear any existing images in the container container.innerHTML = ''; const reader = new FileReader(); reader.onload = async (event) => { const typedArray = new Uint8Array(event.target.result); const pdfDocument = await pdfjsLib.getDocument(typedArray).promise; const numPages = pdfDocument.numPages; for (let i = 1; i <= numPages; i++) { const page = await pdfDocument.getPage(i); const viewport = page.getViewport({ scale: 1.0 }); const canvas = document.createElement('canvas'); canvas.width = viewport.width; canvas.height = viewport.height; const ctx = canvas.getContext('2d'); await page.render({ canvasContext: ctx, viewport }).promise; const dataUrl = canvas.toDataURL('image/jpeg'); download(dataUrl, `page${i}.jpg`); // Create an img element for each page and add it to the container const img = document.createElement('img'); img.src = dataUrl; img.alt = `Page ${i}`; container.appendChild(img); } // Make the image elements draggable and sortable using jQuery UI $("#container").sortable({ // Define a helper function to create a clone of the dragged image helper: function(e, ui) { return $(ui).clone().appendTo("#container").show(); } }); }; reader.readAsArrayBuffer(file); }); exportButton.addEventListener('click', () => { // Create a new jsPDF instance const doc = new jsPDF(); // Get all the img elements in the container const images = container.querySelectorAll('img'); // Add each image to the PDF document images.forEach((img, index) => { if (index > 0) { doc.addPage(); } doc.addImage(img.src, 'JPEG', 10, 10); }); // Save the PDF document doc.save('rearranged.pdf'); }); function download(dataUrl, filename) { const link = document.createElement('a'); link.href = dataUrl; link.download = filename; link.click(); } </script> </body> </html> 但是，当我尝试运行代码时，遇到了两个问题：当我单击“转换为 JPG”按钮时，出现第一条警告消息，显示“已弃用的 API 使用：未指定 GlobalWorkerOptions.workerSrc”。我猜这是由于 GlobalWorkerOptions.workerSrc 属性设置不正确造成的。当我单击“导出为 PDF”按钮时，出现第二条警告消息，显示“未捕获的引用错误：jsPDF 未定义”。看来 jsPDF 库没有正确加载。任何人都可以帮助我了解可能导致这些问题的原因并提供如何解决这些问题的建议吗？您面临的问题确实与外部库的加载顺序和潜在的计时问题有关。让我们分别解决每个问题：已弃用的 API 使用警告 (GlobalWorkerOptions.workerSrc)：要修复“已弃用的 API 使用”警告，您需要在加载 GlobalWorkerOptions.workerSrc 库后设置 pdf.js 属性。您可以在初始化 workerSrc 对象时使用 pdfjsLib 选项来实现此目的。将以下代码放在脚本的开头： const workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.worker.min.js'; const pdfjsLib = window['pdfjs-dist/build/pdf']; pdfjsLib.GlobalWorkerOptions.workerSrc = workerSrc; 然后，您可以像以前一样继续编写脚本的其余部分。未捕获的引用错误：jsPDF 未定义：发生此错误的原因是未加载或识别 jsPDF 库。在使用之前，您需要确保jsPDF库已完全加载。要解决此问题，您可以将导出代码包含在 jsPDF 脚本的 load 事件的事件侦听器中。具体方法如下： const jsPDFScript = document.createElement('script'); jsPDFScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js'; jsPDFScript.onload = () => { // Your export code here exportButton.addEventListener('click', () => { // ... (your existing export code) }); }; document.body.appendChild(jsPDFScript); 将此脚本放在定义 exportButton 和其他元素的部分之后。通过解决这两个问题，您的代码应该按预期工作，不会出现警告和错误。关键是确保所需的库以正确的顺序加载和初始化。

javascript html jquery-ui jspdf pdf.js

回答 1 投票 0

使用 pdf2md 将 PDF 转换为 MD

我在使用 pdf2md 库时遇到输出文件中的土耳其语问题。这个问题似乎在各个文档中表现不一致，出现在一些ins中......

node.js fonts markdown pdf.js pdf-conversion

回答 1 投票 0

XFA PDF 将数据填充到重复的字段 ID 中

使用库 pdf.js IRCC XFA 参考：https://www.canada.ca/content/dam/ircc/migration/ircc/english/pdf/kits/forms/imm5257b_1.pdf 在此 XFA 表单中，fieldid 和 dataid 值是重复的

pdf npm jspdf pdf.js

回答 1 投票 0

如何让 TypeScript 以生成工作 Node.JS 代码的方式加载 PDF.js NPM 模块和 @types 绑定？

上下文我正在尝试将 PDF.JS 导入 TypeScript 项目。我正在使用 pdfjs-dist 的 DefinelyTyped 绑定，通过 npm install @types/pdfjs-dist 和 npm install pdfjs-dist 安装。问题...

node.js typescript import module pdf.js

回答 7 投票 0

PDF.js 设置字段值？

我希望你们一切都好。我已经使用 Mozilla 的 PDF.js 一段时间了。我们使用它来显示要在移动应用程序上填写的 PDF 表单。一切都很好，我只是在尝试......

javascript html forms pdf pdf.js

回答 2 投票 0

使用PDF.JS填写PDF表单

我有一个看起来应该是一个简单的问题 - 我希望能够在 javascript 中以编程方式填写 PDF 表单。我的第一次尝试是使用 pdf-lib，它有一个很好的 API 用于填充...

javascript pdf pdf.js pdf-lib.js

回答 1 投票 0

TypeError：无法从 firefox 开发的 pdf js 中的私有字段读取

我正在使用 pdfjs 在模态中显示 pdf，并且我正在使用 alpine js 来实现此功能 pdf 有多个文件，我想在 pdf 顶部显示导航按钮，以便用户可以

javascript pdf.js alpine.js pdfjs-dist

回答 1 投票 0

PDF.js 以非常低的分辨率/几乎模糊地显示 PDF 文档。是这样吗？

我正在尝试使用PDF.js来查看PDF文档。我发现显示器的分辨率非常低，甚至到了模糊的程度。有解决办法吗？ // PDF 文档的 URL var url = "https://www.

pdf.js

回答 2 投票 0

Google Drive Picker 通过 API 生成空白 pdf

我使用Javascript和Google Drive API来获取PDF，但我无法正确解析文件：页数是正确的，但内容是空白的。我很确定该功能对浏览器有帮助...

javascript google-cloud-platform google-drive-api pdf.js

回答 0 投票 0

如何使用手机查看器

pdf.js nuget包中是否包含离线pdf查看器，只需传递pdf文件的地址即可使用？我不希望 IFRAME 使用在线查看器，设备将关闭...

pdf.js

回答 0 投票 0

在节点服务器上使用 pdf.js

我想使用 node.js 将 pdf 转换为图像服务器端。我对此任务的输入是 pdf 的 url，所需的输出是一个 base64 字符串，表示一个图像。我决定尝试 pdf.js (...

javascript node.js pdf pdf.js

回答 1 投票 0

Mozilla PDF.js 打印对话框中的文件名

请有人帮我，如何在浏览器的打印对话框中设置文件名？我使用的是 Mozilla PDF.js 版本 v3.5.141 PDF 文件作为 base64 发送到默认的 viewer.html。我可以在

javascript php printing mozilla pdf.js

回答 0 投票 0

pdf.js pdfViewer浮点数路由错误

我正在使用 pdf.js 的 pdfviewer 类。当我尝试用文本层渲染 pdf 时，它总是抱怨 --scale-factor css 变量必须设置为与 viewport.scale 相同的值，无论是在

javascript vue.js pdf.js

回答 1 投票 0

如何在不必使用 PDF.js 在画布上渲染图像的情况下将 pdf 转换为图像？

我的问题类似于已经在 SO 上回答过的几个问题，就像这里的这个一样，但是我不打算在画布上显示/渲染 PDFJS 页面对象以转换为图像

javascript vue.js electron pdf.js cropperjs

回答 0 投票 0

PDF.js 显示 PDF 文档，尽管扩大了渲染比例，但仍然显示模糊？

下面这些提高pdf显示质量的方法都没有用，我不知道为什么 pdf-js-scale-pdf-on-fixed-width 模糊-pdf-with-pdf-js-library pdf.js/问题/10509 现在我的问题是...

javascript pdf resolution pdf.js devicepixelratio

回答 0 投票 0

pdf.js 相关问题

最新问题