Reine clientseitige und rein serverseitige Implementierungslösungen für die Konvertierung von HTML in PDF

// html2pdf.js

const puppeteer = erfordern('puppeteer');
(asynchrone Funktion(){
    // Starten Sie den Dienst const browser = await puppeteer.launch();
    // Öffnen Sie die Registerkarte const page = await browser.newPage();
    // Gehe zu dieser Adresse, warte auf page.goto('https://koa.bootcss.com/#context');
    // HTML-Seite in PDF konvertieren und im Pfad speichern
    warte auf Seite.pdf({Pfad:"test.pdf",Format:'A4'})
    // Browser schließen. await browser.close();
})();

   // DOM ist der zu konvertierende DOM-Knoten html2canvas(DOM,{
        Hintergrundfarbe: "#ffffff",
        Breite:Breite,
        Höhe:Höhe,
        Maßstab: 2,
        allowTaint:true,
    }).dann((Leinwand)=>{
        // Canvas ist die Leinwand nach erfolgreicher Konvertierung})

   // Eine Instanz erstellen let pdf = new jsPDF('','pt','a4');
    // Bild zur PDF-Datei hinzufügen // Der erste Parameter ist das einzufügende Dateiformat (base64), der zweite ist das Dateiformat // Der dritte und vierte sind die Koordinaten der oberen linken Ecke des Bildes und die letzten beiden sind die Breite und Höhe des Bildes nach dem Einfügen pdf.addImage(image,'JPEG',10,10,height,width);
    // Neue Seite hinzufügen pdf.addPage()
    // PDF-Datei speichern pdf.save()

  // Canvas ist das Bild, das zugeschnitten werden soll. // sx, sy sind die Koordinaten für den Beginn des Zuschneidens. // swidth, sHeight sind die Breite und Höhe des Zuschneidens. // dx, dy sind die Koordinaten zum Einfügen des zugeschnittenen Bildes in den Canvas. // sWidth, sHeight sind die Breite und Höhe des zugeschnittenen Bildes im Canvas. cxt.drawImage(canvas, sx, sy, sWidth, sHeight, dx, dy, sWidth, sHeight);

/**
 * @description: Formular in PDF-Datei konvertieren* @return: pdf
 */
beim Absenden(){
    // Dies ist das Formular, das ich konvertieren möchte. Es enthält viele identische Formulare. let form = this.$refs.form;
    // Breite und Höhe des Elements abrufen let width = form.getBoundingClientRect().width;
    let height = form.getBoundingClientRect().height;
    html2canvas(Formular,{
        Hintergrundfarbe: "#ffffff",
        Breite:Breite,
        Höhe:Höhe,
        Maßstab: 2,
        allowTaint:true,
    }).dann((Leinwand)=>{
        Fügt eine neue PDF-Datei hinzu, die mit der Funktion jsPDF('','pt','a4') identisch ist.
        // Bild ausschneiden let canvasList = this.splitCanvas(canvas,this.forms.length);

        // Durchlaufe die Canvas-Liste und füge jeder Seite ein Bild hinzu canvasList.forEach((item,index)=>{
            //Konvertiere das Bildformat in Base64
            let itemImage = item.toDataURL('image/jpeg',1.0);
            // 10 Pixel Rand freihalten, die Breite eines A4-Blatts beträgt 595 Pixel auf einem Monitor mit 72-Auflösung
            pdf.addImage(itemImage,'JPEG',10,10,575.28,575.28/item.width*item.height);
            // Wenn es nicht die letzte Seite ist, paginieren Sie den Index == this.forms.length-1 ? '' : pdf.addPage();
        })
        // Datei speichern let blob = pdf.output('blob');
        
        pdf.save('test.pdf');
    })
},
/**
 * @description: Leinwand ausschneiden * @param {number} num Anzahl der Scheiben * @param {canvas} Leinwand 
 * @return {array} Canvas-Liste*/
splitCanvas(Leinwand,Anzahl){
    sei Höhe = Leinwandhöhe, Breite = Leinwandbreite;
    let chunkHeight = height/num; // Die Höhe jedes Slices let chunkList = []; // Das Ergebnis-Canvas speichern
    für (lass i = 0; i < Höhe; i + = Blockhöhe) {
        // Position des Zuschneiderechtecks ​​initialisieren let sx = 0,sy = i,sWidth = width,sHeight = chunkHeight,dx = 0, dy = 0;
        // Einen Canvas-Knoten erstellen let canvasItem = document.createElement("canvas");
        // Leinwandgröße initialisieren canvasItem.height = chunkHeight;
        canvasItem.width = Breite;
        let cxt = canvasItem.getContext("2d");
        // Fügen Sie das zugeschnittene Bild in den neuen Canvas-Knoten ein cxt.drawImage(canvas,sx,sy,sWidth,sHeight,dx,dy,sWidth,sHeight);
        chunkList.push(canvasItem); 
    }
    gibt ChunkList zurück;
},