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

Question

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!!

Answer 1

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:

1. Install npm module: PDF-lib

   npm i pdf-lib

2. 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);
    }
   }
   

3. Call the function for print (app.component.html)

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

Reference: pdf-lib

Answer 2

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');
    }
})

Answer 3

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.