Vue.js 原生JS实现一次性打印多个PDF：多页拼接，利用iframe
以下是使用Vue.js和原生JavaScript实现一次性打印多个pdf blob流并拼接成多页的示例代码：
<template>
<div>
<button @click="printPDFs">打印PDF</button>
<iframe ref="printFrame" style="display: none;"></iframe>
</div>
</template>
<script>
export default {
data() {
return {
pdfs: [], // 存储多个pdf blob流
};
},
methods: {
printPDFs() {
// 清空之前的pdfs
this.pdfs = [];
// 生成多个pdf blob流
const pdf1Blob = this.generatePDFBlob('PDF1 content');
const pdf2Blob = this.generatePDFBlob('PDF2 content');
// 将blob流添加到pdfs数组中
this.pdfs.push(pdf1Blob);
this.pdfs.push(pdf2Blob);
// 打印多个pdf
this.printMultiplePDFs();
},
generatePDFBlob(content) {
// 生成pdf blob流
const pdfData = new Uint8Array(content.length);
for (let i = 0; i < content.length; i++) {
pdfData[i] = content.charCodeAt(i);
}
return new Blob([pdfData], { type: 'application/pdf' });
},
printMultiplePDFs() {
const printFrame = this.$refs.printFrame;
const printWindow = printFrame.contentWindow;
// 清空iframe内容
printWindow.document.open();
printWindow.document.write('<html><head></head><body></body></html>');
printWindow.document.close();
// 遍历pdfs数组，将每个pdf blob流添加到iframe中
this.pdfs.forEach((pdfBlob) => {
const objectURL = URL.createObjectURL(pdfBlob);
const embed = document.createElement('embed');
embed.src = objectURL;
embed.style.width = '100%';
embed.style.height = '100%';
printWindow.document.body.appendChild(embed);
});
// 打印iframe内容
printWindow.print();
},
},
};
</script>
在上面的示例代码中，首先定义了一个按钮，当点击按钮时，会调用printPDFs方法。
printPDFs方法首先清空之前的pdfs数组，然后生成两个pdf blob流，并将它们添加到pdfs数组中。接下来调用printMultiplePDFs方法来打印多个pdf。
generatePDFBlob方法用于生成pdf blob流。它将给定的内容转换为Uint8Array，并创建一个包含该数组的Blob对象。
printMultiplePDFs方法使用<iframe>元素来打印多个pdf。首先清空<iframe>的内容，然后遍历pdfs数组，将每个pdf blob流添加到<iframe>中。最后调用print方法来打印<iframe>的内容。
请注意，上面的示例代码中的pdf内容仅用于演示目的。在实际应用中，您需要根据实际需求生成正确的pdf内容。
原文地址: https://www.cveoy.top/t/topic/p9PI 著作权归作者所有。请勿转载和采集!