A guide on printing several PDF files at once with print.js in Angular 9

Question

A guide on printing several PDF files at once with print.js in Angular 9

After successfully using the print.js library to print a single PDF, I encountered an issue when attempting to print multiple PDFs. An error message stating "ERROR Multiple Choices" was displayed. I also experimented with plain JS, but it resulted in multiple prompts for each document.

Below is the code snippet we implemented:

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

Please see the attached image for reference: https://i.sstatic.net/ZHwKN.jpg

Any assistance on this matter would be greatly appreciated. Thank you!

javascript angular typescript angular9 printjs

Answer 1

Answer №1

After dedicating a full week to the task, I have successfully mastered the art of printing multiple PDF files using print.js in Angular 9. Here are the steps you need to follow to print multiple PDFs:

Begin by installing the npm module: PDF-lib

npm i pdf-lib

Next, import the npm module into your Angular file and combine multiple PDFs into a single document using the following code (e.g., app.component.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 printing or viewing 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);
 }
}

Lastly, call the function to print the PDFs (app.component.html)
```
<button (click)="printPDFS()">Print PDFs</button>
```

For more information, visit: pdf-lib

Answer 2

After dedicating a full week to the task, I have successfully mastered the art of printing multiple PDF files using print.js in Angular 9. Here are the steps you need to follow to print multiple PDFs:

Begin by installing the npm module: PDF-lib

npm i pdf-lib

Next, import the npm module into your Angular file and combine multiple PDFs into a single document using the following code (e.g., app.component.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 printing or viewing 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);
 }
}

Lastly, call the function to print the PDFs (app.component.html)
```
<button (click)="printPDFS()">Print PDFs</button>
```

For more information, visit: pdf-lib

Answer 3

Answer №2

If you find yourself needing to print multiple files with print.js, consider merging them into a single file first for a smoother user experience. This way, you only need to deal with one print preview.

Alternatively, you can utilize the onPrintDialogClose Event as a workaround:

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

Answer 4

If you find yourself needing to print multiple files with print.js, consider merging them into a single file first for a smoother user experience. This way, you only need to deal with one print preview.

Alternatively, you can utilize the onPrintDialogClose Event as a workaround:

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

Answer 5

Answer №3

As stated in the documentation

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

The implication is that only one printable can be processed at a time.

To handle this limitation, I recommend iterating through the basics of its usage by calling printJS() and passing 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]);
}

Alternatively, you could concatenate the files on the server-side as suggested by pbachman.

Answer 6

As stated in the documentation

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

The implication is that only one printable can be processed at a time.

To handle this limitation, I recommend iterating through the basics of its usage by calling printJS() and passing 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]);
}

Alternatively, you could concatenate the files on the server-side as suggested by pbachman.

A guide on printing several PDF files at once with print.js in Angular 9

Answer №1

Answer №2

Answer №3

Similar questions

Implementing a dynamic like functionality using Ajax in Django

Customize your dropdown menu options with JQuery: A step-by-step guide

When attempting to utilize POST commands in a React application, encountering the error "Cannot GET /"

Retrieving JSON data in array by making an AngularJS resource call

Error code 405: The POST method is not compatible with submitting multiple forms using JavaScript code simultaneously

The integration of Vue JS is not displaying properly in an Electron application

How can I prevent an element from gaining focus after opening a NgbModal?

Angularfire/Firebase utilizes the Authorization Code Grant flow for OAuth

Is there a way to speed up the processing time of parsing a 34Mb file using JSON.parse, which currently takes

Compilation failure due to Typescript initialization issue

What would be the most effective approach for creating a reactive setter for an object within an array in Vuex?

Combining CSS and JS files for accordion list - experiencing issues when used separately

Using Selenium to locate an element by CSS and submitting a form

What is the best way to convert similar JavaScript functions into a reusable function?

what is the best way to switch classes between 2 buttons using Angular8

Having trouble with an unexpected value in your Angular2 Service? Don't forget to add

Angular Group Formation Issue

A guide on efficiently mapping all items from an object containing an unspecified number of items or item names within a reusable component

Choosing the ID and class name through jQuery among numerous classes

Why would npm be unable to locate a file, potentially leading to an error? Could the lack of contents in my node_modules subfolder be the root cause of this issue?