I have tried to print PDF by using print.js library and it's working fine for single PDF print. now when I am trying to print multiple PDFs, it's throwing an error: ERROR Multiple Choices.. also, I have tried with plain JS but it prompts multiple times for multiple documents.
Below is the code we are using.
printJS({
printable: ['dummy.pdf', 'dummy1.pdf'],
type:'pdf'
});
please find the attachment.
Any help much appreciate!!
Finally, after spending 1 week, I am able to print multiple PDF's using print.js in angular 9. Below are the following steps to print multiple pdfs:
Install npm module: PDF-lib
npm i pdf-lib
import npm module in the angular file and merge multiple pdfs into single pdfs using below code(say 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);
}
}
Call the function for print (app.component.html)
<button (click)="printPDFS()">print pdfs</button>
Reference: pdf-lib
At the moment print.js doesn't support printing multiple files. I would try to merge the files first into a single file and then printing that one file. This creates one print preview only, providing a better user experience.
as workaround you could use the onPrintDialogClose Event
printJS({
printable: 'page01.pdf',
type: 'pdf',
onPrintDialogClose: function() {
printJS('page02.pdf');
}
})
According to the documentation
printable - Document source: pdf or image url, html element id or json data object.
It implies to only allow one printable at each time.
So, I'd just try to loop through it's basic usage (call printJS() and just pass in a PDF document url)
var pdfs_list = ['dummy.pdf', 'dummy1.pdf'];
for (var i = 0; i < pdfs_list.length; i++) {
printJS(pdfs_list[i]);
}
Either that or you concatenate the files server-side like pbachman suggests.
printJS('images/print-01-highres.jpg', 'image'). Basically it's the same but you have to pass a second argument called image. So, there's different ways you can go about doing that. If you only have .pdf files and images, you can use an if statement inside of the loop and check if that item of the array contains the letters .pdf; else, use the method with the second argument.
printJS() reuses the same iframe, so data from the first call is overwritten by the next one.