如何通过pdf.js获取修改后PDF的二进制数据并回传至服务器?
使用pdf.js获取修改后PDF二进制数据的问题
我使用的是适用于现代浏览器的pdf.js(v3.10.111)稳定版,已实现PDF文件加载、图形化修改和本地保存,但不清楚如何通过JavaScript/Jquery获取修改后文件的数据并回传至服务器。
当前我的代码如下:
<!DOCTYPE html> <html> <head> <script src="build/pdf.js"></script> <script src="build/pdf.worker.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <div id="pdf-container"></div> <iframe id="pdf-js-viewer" src="web/viewer.html?file=a.pdf" title="webviewer" frameborder="0" width="1024" height="1024"></iframe> <button id="downloadPdfButton">Download PDF</button> <div id="pdf-data-container"></div> <!-- The <div> to display the PDF binary data --> <script type="text/javascript"> $(document).ready(function () { let pdfDocument = null; let editedPdfData = null; // To store edited PDF data const pdfUrl = 'a.pdf'; pdfjsLib.getDocument(pdfUrl).promise.then(function (pdfDoc) { pdfDocument = pdfDoc; $('#downloadPdfButton').click(function () { if (pdfDocument) { // Check if editedPdfData is available, if not, use the original PDF data if (editedPdfData) { // Use the edited PDF data displayEditedPdfData(); } else { // Get the PDF blob data pdfDocument.getData().then(function (data) { // Create a Blob from the binary PDF data const pdfBlob = new Blob([data], { type: 'application/pdf' }); // Create a URL for the Blob const pdfUrl = URL.createObjectURL(pdfBlob); // Display the original PDF binary data in the div displayPdfData(pdfUrl); }); } } else { alert('PDF not loaded.'); } }); }); // Function to display PDF data in the div function displayPdfData(dataUrl) { const pdfDataContainer = document.getElementById('pdf-data-container'); pdfDataContainer.innerHTML = `<object data="${dataUrl}" type="application/pdf" width="100%" height="600px"></object>`; } // Function to display edited PDF data in the div function displayEditedPdfData() { if (editedPdfData) { // Create a Blob from the edited PDF data const editedPdfBlob = new Blob([editedPdfData], { type: 'application/pdf' }); // Create a URL for the Blob const editedPdfUrl = URL.createObjectURL(editedPdfBlob); // Display the edited PDF binary data in the div displayPdfData(editedPdfUrl); } } }); </script> </body> </html>
目前代码几乎可用,但存在一个问题:点击按钮后显示的是原PDF而非修改后的PDF。我希望在div中显示修改后的PDF,并获取其二进制数据。
内容的提问来源于stack exchange,提问作者user2194805
相关产品推荐
相关产品推荐

