要在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);
上述代码使用pdf-lib库来读取和合并两个远程PDF文件。它使用Axios库来获取远程PDF文件的字节数据，并将其加载到PDFDocument对象中。然后，它遍历每个PDF文件的页面，并将它们添加到合并后的PDF文档中。最后，它将合并后的PDF文档保存为字节数组。
您可以根据需要在mergePDFs函数中添加适当的代码来执行后续操作，例如将合并后的PDF文件下载到本地或读取矢量数据。
请注意，由于安全原因，浏览器可能会阻止从不同域的远程PDF文件加载数据。如果遇到这种情况，请确保您在服务器上设置了适当的CORS（跨域资源共享）配置。
PDF-LIB库包含的功能
创建和修改
从头开始创建PDF文档，或修改现有的PDF文档。绘制文本、图像和矢量图形。嵌入您自己的字体。甚至从其他PDF中嵌入和绘制页面。
纯JavaScript
用TypeScript编写，并编译为纯JavaScript，没有本地依赖项。适用于任何JavaScript运行时，包括浏览器、Node、Deno，甚至React Native。
拆分和合并
添加、插入和删除页面。将单个PDF拆分为单独的PDF。或者将多个PDF合并到一个文档中。
填写表格
创建新表单或填写并读取现有字段。复选框、按钮、单选组、下拉列表、选项列表和文本字段都受支持。
