如何在 angular 9 中使用 print.js 打印多个 PDF

Question

我已尝试使用 print.js 库打印 PDF，它可以很好地打印单个 PDF。现在，当我尝试打印多个 PDF 时，它会抛出 错误：多项选择错误。。另外，我尝试过使用纯 JS，但它会多次提示多个文档。

下面是我们使用的代码。

printJS({ 
         printable: ['dummy.pdf', 'dummy1.pdf'], 
         type:'pdf'
        });

请找到附件。

非常感谢任何帮助！！

Answer 1

目前print.js不支持打印多个文件。我会尝试先将文件合并为一个文件，然后打印该文件。这只会创建一个打印预览，提供更好的用户体验。

作为解决方法，您可以使用 onPrintDialogClose 事件

printJS({
    printable: 'page01.pdf',
    type: 'pdf',
    onPrintDialogClose: function() {
        printJS('page02.pdf');
    }
})

Answer 2

根据documentation

printable - Document source: pdf or image url, html element id or json data object.

表示每次只允许打印一张。

所以，我只是尝试遍历它的基本用法（调用 printJS() 并传入 PDF 文档 url）

var pdfs_list = ['dummy.pdf', 'dummy1.pdf'];
for (var i = 0; i < pdfs_list.length; i++) {
    printJS(pdfs_list[i]);
}

要么像建议的那样在服务器端连接文件。

Answer 3

终于，在花费 1 周后，我可以在 angular 9 中使用 print.js 打印多个 PDF。以下是打印多个 pdf 的以下步骤：

安装 npm 模块：PDF-lib

npm i pdf-lib

在 angular 文件中导入 npm 模块，并使用以下代码将多个 pdf 合并为单个 pdf（比如 app.components.ts）

import { PDFDocument } from 'pdf-lib'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})

export class AppComponent {
title = 'print-multiple-pdfs';

/* Convert the merged pdf array buffer to blob url for print or open in browser.*/
downloadFile(data) {
 const blob = new Blob([data], { type: 'application/pdf' });
 const url= window.URL.createObjectURL(blob);
 //window.open(url);
 printJS({
   printable: url,
   type: 'pdf',
 })
}

async printPDFS() {
 /* Array of pdf urls */
 let pdfsToMerge = ['https://cors-anywhere.herokuapp.com/https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf', 'https://cors-anywhere.herokuapp.com/http://africau.edu/images/default/sample.pdf', 'https://cors-anywhere.herokuapp.com/https://www.hq.nasa.gov/alsj/a17/A17_FlightPlan.pdf']

 const mergedPdf = await PDFDocument.create();
 for (const pdfCopyDoc of pdfsToMerge) {
 const pdfBytes = await fetch(pdfCopyDoc).then(res => res.arrayBuffer())
 //const pdfBytes = fs.readFileSync(pdfCopyDoc);
 const pdf = await PDFDocument.load(pdfBytes);
 const copiedPages = await mergedPdf.copyPages(pdf, pdf.getPageIndices());
 copiedPages.forEach((page) => {
   mergedPdf.addPage(page);
 });
}
const mergedPdfFile = await mergedPdf.save();
this.downloadFile(mergedPdfFile);
 }
}

调用打印函数(app.component.html)

<button (click)="printPDFS()">print pdfs</button>

参考：pdf-lib

如何在 angular 9 中使用 print.js 打印多个 PDF

How to print multiple PDF's using print.js in angular 9

javascript

typescript

printjs

angular

angular9