JS iframe 合并多个 PDF Blob 并打印 - 完整指南

要拼接多个 blob 的 PDF 并在 iframe 中打印在一起，你可以使用以下步骤：\n\n1. 创建一个空的 iframe 元素，并将其添加到 HTML 页面中的适当位置：\n\nhtml\n<iframe id="pdfIframe" style="display:none;"></iframe>\n\n\n2. 创建一个用于存储合并后的 PDF 数据的空数组：\n\njavascript\nvar mergedPdfData = [];\n\n\n3. 使用 XMLHttpRequest 或 Fetch API 加载每个 PDF 并将其转换为 blob 对象。然后将每个 blob 添加到合并后的 PDF 数据数组中：\n\njavascript\nfunction loadPdf(url) {\n return new Promise(function(resolve, reject) {\n var xhr = new XMLHttpRequest();\n xhr.open('GET', url, true);\n xhr.responseType = 'blob';\n xhr.onload = function() {\n if (xhr.status === 200) {\n resolve(xhr.response);\n } else {\n reject(new Error('Failed to load PDF: ' + xhr.statusText));\n } \n };\n xhr.onerror = function() {\n reject(new Error('Network error'));\n };\n xhr.send();\n });\n}\n\nvar pdfUrls = ['pdf1.pdf', 'pdf2.pdf', 'pdf3.pdf'];\n\nvar loadPromises = pdfUrls.map(function(url) {\n return loadPdf(url);\n});\n\nPromise.all(loadPromises)\n .then(function(blobs) {\n mergedPdfData = blobs;\n mergeAndDisplayPdf();\n })\n .catch(function(error) {\n console.error(error);\n });\n\n\n4. 创建一个函数来合并所有的 blob 数据并显示在 iframe 中：\n\njavascript\nfunction mergeAndDisplayPdf() {\n var mergedBlob = new Blob(mergedPdfData, { type: 'application/pdf' });\n var pdfUrl = URL.createObjectURL(mergedBlob);\n\n var pdfIframe = document.getElementById('pdfIframe');\n pdfIframe.src = pdfUrl;\n pdfIframe.style.display = 'block';\n}\n\n\n这样，所有的 PDF 将被合并为一个 blob，并在 iframe 中显示出来。\n\n请注意，上述代码仅是一个示例，你需要根据你的实际需求进行调整。另外，由于涉及跨域资源加载，可能需要进行 CORS 设置或将 PDF 文件放置在与页面相同的域中。