You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何通过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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.11 02:45:58