Website-Suche

javascript - Wie man mehrere PDFs mit print.js in Angular 9 druckt

Ich habe versucht, PDF mit der print.js Bibliothek zu drucken, und es funktioniert einwandfrei für den Druck einzelner PDFs. Jetzt, wenn ich versuche, mehrere PDFs zu drucken, wird ein Fehler: ERROR Multiple Choices. angezeigt. Außerdem habe ich es mit einfachem JS versucht, aber es fordert bei mehreren Dokumenten mehrmals zur Bestätigung auf.

Unten ist der Code, den wir verwenden.

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

Bitte finden Sie den Anhang.

Jede Hilfe wird sehr geschätzt!!

Antwort #1

Endlich, nach einer Woche, bin ich in der Lage, mehrere PDFs mit print.js in Angular 9 zu drucken. Unten sind die folgenden Schritte, um mehrere PDFs zu drucken:

  1. Installiere npm-Modul: PDF-lib

    npm i pdf-lib

  2. importieren Sie das npm-Modul in die Angular-Datei und fügen Sie mehrere PDFs mit dem folgenden Code in ein einzelnes PDF zusammen (zum Beispiel 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. Rufen Sie die Funktion zum Drucken auf (app.component.html)

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

Referenz: pdf-lib

Antwort #2

Im Moment unterstützt print.js das Drucken mehrerer Dateien nicht. Ich würde versuchen, die Dateien zuerst in einer einzigen Datei zusammenzuführen und dann diese eine Datei zu drucken. Dies erzeugt nur eine Druckvorschau und bietet ein besseres Benutzererlebnis.

Als Umgehungslösung könnten Sie das onPrintDialogClose-Ereignis verwenden

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

Verwandte Artikel