Vue.js 使用原生JS实现一次性打印多个PDF blob流 (拼接多页)

在Vue.js中，使用原生JS实现一次性打印多个PDF blob流并拼接成多页，可以利用iframe元素实现。\n\n首先，你需要在Vue组件中创建一个iframe元素，并设置其src属性为第一个PDF blob流的URL。这样可以在iframe中加载第一个PDF文件。\n\n然后，你可以使用Vue的生命周期钩子函数mounted来监听iframe的load事件，一旦第一个PDF文件加载完成，你可以在该事件处理函数中继续加载下一个PDF文件。\n\n下面是一个示例代码：\n\nhtml\n<template>\n <div>\n <iframe ref="pdfIframe"></iframe>\n </div>\n</template>\n\n<script>\nexport default {\n mounted() {\n this.loadPDFs();\n },\n methods: {\n loadPDFs() {\n const pdfs = [/* 你的PDF blob流数组 */];\n let currentIndex = 0;\n\n const iframe = this.$refs.pdfIframe;\n\n iframe.addEventListener('load', () => {\n // 当前PDF加载完成后，判断是否还有下一个PDF需要加载\n currentIndex++;\n\n if (currentIndex < pdfs.length) {\n // 如果还有下一个PDF，设置iframe的src属性为下一个PDF的URL\n iframe.src = URL.createObjectURL(pdfs[currentIndex]);\n } else {\n // 如果所有PDF都加载完成，调用打印方法\n this.printPDF();\n }\n });\n\n // 设置iframe的src属性为第一个PDF的URL\n iframe.src = URL.createObjectURL(pdfs[currentIndex]);\n },\n printPDF() {\n const iframe = this.$refs.pdfIframe.contentWindow;\n\n // 执行打印操作\n iframe.print();\n }\n }\n}\n</script>\n\n\n在上述代码中，你需要将pdfs数组替换为你的PDF blob流数组。在loadPDFs方法中，我们使用了一个currentIndex变量来追踪当前加载的PDF索引。每次加载完成一个PDF后，我们将currentIndex加1，并将iframe的src属性设置为下一个PDF的URL。当所有PDF加载完成后，我们调用printPDF方法来执行打印操作。\n\n请注意，上述代码仅提供了加载和打印多个PDF的基本逻辑，你可能需要根据实际需求进行适当的修改和调整。