7

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.

enter image description here Any help much appreciate!!

Priyank
  • 3,778
  • 3
  • 29
  • 48

3 Answers3

6

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

Priyank
  • 3,778
  • 3
  • 29
  • 48
3

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');
    }
})
pbachman
  • 934
  • 2
  • 11
  • 18
  • Thanks for the suggestion. can you let me know how to merge multiple PDF's into a single file? – Priyank Jul 27 '20 at 08:09
  • how to merge multiple PDF's into a single file on the client-side? – Priyank Jul 27 '20 at 08:17
  • 1
    @Priyank i would recommend to do it server-side. if this is not possible, there is an example with pdf.js here https://stackoverflow.com/questions/9809001/is-there-a-way-to-combine-pdfs-in-pdf-js#answers-header – pbachman Jul 27 '20 at 08:25
  • How we can print pdf and images using the above solution? – Priyank Jul 29 '20 at 12:09
0

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.

Tiago Martins Peres
  • 14,289
  • 18
  • 86
  • 145
  • How we can print pdf and images using the print.js? – Priyank Jul 30 '20 at 07:00
  • @Priyank if you have a different question, feel free to go ahead and ask. To print images the documentation shows `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](https://stackoverflow.com/a/4444497/5675325) `.pdf`; else, use the method with the second argument. – Tiago Martins Peres Jul 30 '20 at 07:19
  • This doesn't work in practice - only the last document is printed. The reason is that `printJS()` reuses the same iframe, so data from the first call is overwritten by the next one. – Cerberus Dec 06 '21 at 08:37