当前位置：首页 > news >正文

JS合并2个远程pdf

news 2025/8/26 0:31:03

要在HTML和JavaScript中读取远程PDF文件的矢量数据并合并两个PDF文件，您可以使用pdf-lib和Axios库。以下是使用pdf-lib和Axios在HTML和JavaScript中读取和合并远程PDF文件的步骤：

1. 引入

首先，确保您在HTML文件中引入了pdf-lib和Axios库。您可以通过CDN链接或本地文件引入它们。例如：

<script src="https://cdn.jsdelivr.net/npm/pdf-lib@1.17.1/dist/pdf-lib.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@1.5.0/dist/axios.min.js"></script>

或者，您可以将pdf-lib和Axios库下载到本地，然后在HTML中引入它们的本地文件。

2. 添加按钮

在HTML文件中添加一个按钮，用于触发读取和合并PDF文件的操作。例如：

<button onclick="mergePDFs()">合并PDF文件</button>

3. 添加JS

在JavaScript文件中添加以下代码来实现读取和合并PDF文件的功能：

// 合并PDF文件
async function mergePDFs() {const pdfUrl1 = 'https://example.com/path/to/first/pdf/file.pdf';const pdfUrl2 = 'https://example.com/path/to/second/pdf/file.pdf';try {// 读取第一个PDF文件const pdfBytes1 = await axios.get(pdfUrl1, { responseType: 'arraybuffer' });const pdfDoc1 = await PDFLib.PDFDocument.load(pdfBytes1.data);// 读取第二个PDF文件const pdfBytes2 = await axios.get(pdfUrl2, { responseType: 'arraybuffer' });const pdfDoc2 = await PDFLib.PDFDocument.load(pdfBytes2.data);// 创建一个新的PDF文档const mergedPdfDoc = await PDFLib.PDFDocument.create();// 合并两个PDF文档的页面const [existingPage] = await mergedPdfDoc.copyPages(pdfDoc1, [0])mergedPdfDoc.addPage(existingPage)const [existing2Page] = await mergedPdfDoc.copyPages(pdfDoc2, [0])mergedPdfDoc.addPage(existing2Page)// 将合并后的PDF文档保存为字节数组const mergedPdfBytes = await mergedPdfDoc.save();// 可根据需要进行后续操作，例如下载合并后的PDF文件或读取矢量数据// ...console.log('PDF文件合并成功！');} catch (error) {console.error('无法合并PDF文件：', error);}
}

4.预览

添加html

<iframe id="pdf" style="width: 100%; height: 100%;"></iframe>

添加js

    const pdfDataUri = await mergedPdfDoc.saveAsBase64({dataUri: true});document.getElementById('pdf').src = pdfDataUri;

5.下载

简单的下载逻辑

        var downloadLink = document.createElement('a');downloadLink.href = URL.createObjectURL(new Blob([mergedPdfBytes]));downloadLink.download = 'merged_pdf.pdf';document.body.appendChild(downloadLink);downloadLink.click();document.body.removeChild(downloadLink);