So generieren Sie PDFs und laden sie im Vue-Frontend herunter

//Konvertiere das Seiten-HTML in ein Bild npm install html2canvas --save  
// Aus dem Bild ein PDF erstellen
npm installiere jspdf --save

importiere htmlToPdf aus „@/utils/htmlToPdf“;
// Die Verwendung der Methode Vue.use() ruft die Installationsmethode in der Toolmethode Vue.use(htmlToPdf) auf.

pdf = neues jsPDF('p', 'pt', [pdfX, pdfY]);
Der erste Parameter: l: horizontal p: vertikal Der zweite Parameter: Maßeinheit („pt“, „mm“, „cm“, „m“, „in“ oder „px“);
Der dritte Parameter: kann folgendes Format haben, der Standard ist „a4“. Für ein benutzerdefiniertes Format übergeben Sie die Größe einfach als numerisches Array, etwa: [592,28, 841,89];
		   a0 bis a10
		   b0 - b10
		   c0 bis c10
  		   dl
		   Brief
		   Regierungsbrief
		   Rechtliches
		   Junior-Rechtsanwalt
		   Hauptbuch
		   Boulevardzeitung
		   Kreditkarte

let targetPage = pdf.internal.getNumberOfPages(); //Gesamtseitenzahl abrufen pdf.deletePage(targetPage); //Zielseite löschen

pdf.save(`test.pdf`);

// Seite ins PDF-Format exportieren. html2Canvas von „html2canvas“ importieren.
JsPDF aus „jspdf“ importieren
Standard exportieren{
  installieren (Vue, Optionen) {
    Vue.prototype.getPdf = Funktion () {
      // Wenn es beim Herunterladen der PDF-Datei nicht oben auf der Seite steht, ist der PDF-Stil falsch. Gehen Sie daher zurück zum Anfang der Seite und laden Sie es dann herunter. let top = document.getElementById('pdfDom');
      wenn (oben != null) {
        top.scrollIntoView();
        oben = null;
      }
      let title = this.exportPDFtitle;
      html2Canvas(document.querySelector('#pdfDom'), {
        allowTaint: wahr
      }).dann(Funktion (Leinwand) {
        // Breite und Höhe der Leinwand abrufen let contentWidth = canvas.width;
        Lassen Sie contentHeight = canvas.height;
	      // Die Höhe der Leinwand, die von einer PDF-Seite generiert wird, auf der die HTML-Seite angezeigt wird;
        let Seitenhöhe = Inhaltsbreite / 841,89 * 592,28;
	      //Höhe der HTML-Seite ohne PDF-Generierung let leftHeight = contentHeight;
	      // Seitenoffset let position = 0;
	      // Die Breite und Höhe des von der HTML-Seite im PDF generierten Canvas-Bildes (in diesem Fall: horizontales A4-Blatt [841,89, 592,28], die vertikale Größe muss geändert werden)
        sei imgWidth = 841,89;
        let imgHeight = 841,89 / Inhaltsbreite * Inhaltshöhe;
        : Lassen Sie pageData = canvas.toDataURL('image/jpeg', 1.0);
        let PDF = neues JsPDF('l', 'pt', 'a4');
        // Es müssen zwei Höhen unterschieden werden: eine ist die tatsächliche Höhe der HTML-Seite und die andere ist die Höhe der generierten PDF-Seite. // Wenn der Inhalt den Bereich einer PDF-Seite nicht überschreitet, ist keine Seitennummerierung erforderlich if (leftHeight < pageHeight) {
          PDF.addImage(Seitendaten, 'JPEG', 0, 0, Bildbreite, Bildhöhe)
        } anders {
          während (linkeHöhe > 0) {
            PDF.addImage(Seitendaten, „JPEG“, 0, Position, Bildbreite, Bildhöhe)
            linkeHöhe -= Seitenhöhe;
            Position -= 592,28;
            // Vermeiden Sie das Hinzufügen leerer Seiten, wenn (leftHeight > 0) {
              PDF.addPage();
            }
          }
        }
        PDF.speichern(Titel + '.pdf')
      })
    }
  }
}

<Vorlage>
  <div Klasse="wrap" >
    <div id="pdfDom" style="padding: 10px;">
      <el-Tabelle
        :data="Tabellendaten"
        Grenze>
        <el-table-column prop="date" label="Datum" width="250"></el-table-column>
        <el-table-column prop="name" label="Tabelle" width="250"></el-table-column>
        <el-table-column prop="address" label="Adresse"></el-table-column>
      </el-Tabelle>
    </div>
    <button type="button" style="margin-top: 20px;" @click="btnClick">PDF exportieren</button>
  </div>

</Vorlage>
 
<Skript>
Standard exportieren {
  Daten() { 
    zurückkehren {
      exportPDFtitle: "Name der PDF-Datei zum Seitenexport",
      Tabellendaten: [
         {
          Datum: '2016-05-06',
          Name: 'Wang Xiaohu',
          Adresse: „Huoju Avenue, Bezirk Jiulongpo, Chongqing“
        }, {
          Datum: '2016-05-07',
          Name: 'Wang Xiaohu',
          Adresse: „Huoju Avenue, Bezirk Jiulongpo, Chongqing“
        },{
          Datum: '2016-05-03',
          Name: 'Wang Xiaohu',
          Adresse: „Nr. 1518, Jinshajiang Road, Bezirk Putuo, Shanghai“
        }, {
          Datum: '2016-05-02',
          Name: 'Wang Xiaohu',
          Adresse: „Nr. 1518, Jinshajiang Road, Bezirk Putuo, Shanghai“
        }, {
          Datum: '2016-05-04',
          Name: 'Wang Xiaohu',
          Adresse: „Nr. 1518, Jinshajiang Road, Bezirk Putuo, Shanghai“
        }, {
          Datum: '2016-05-01',
          Name: 'Wang Xiaohu',
          Adresse: „Nr. 1518, Jinshajiang Road, Bezirk Putuo, Shanghai“
        }, {
          Datum: '2016-05-08',
          Name: 'Wang Xiaohu',
          Adresse: „Nr. 1518, Jinshajiang Road, Bezirk Putuo, Shanghai“
        }, {
          Datum: '2016-05-06',
          Name: 'Wang Xiaohu',
          Adresse: „Nr. 1518, Jinshajiang Road, Bezirk Putuo, Shanghai“
        }, {
          Datum: '2016-05-06',
          Name: 'Wang Xiaohu',
          Adresse: „Nr. 1518, Jinshajiang Road, Bezirk Putuo, Shanghai“
        }, {
          Datum: '2016-05-07',
          Name: 'Wang Xiaohu',
          Adresse: „Nr. 1518, Jinshajiang Road, Bezirk Putuo, Shanghai“
        }, {
          Datum: '2016-05-01',
          Name: 'Wang Xiaohu',
          Adresse: „Nr. 1518, Jinshajiang Road, Bezirk Putuo, Shanghai“
        }, {
          Datum: '2016-05-08',
          Name: 'Wang Xiaohu',
          Adresse: „Nr. 1518, Jinshajiang Road, Bezirk Putuo, Shanghai“
        }, {
          Datum: '2016-05-06',
          Name: 'Wang Xiaohu',
          Adresse: „Nr. 1518, Jinshajiang Road, Bezirk Putuo, Shanghai“
        }, {
          Datum: '2016-05-07',
          Name: 'Wang Xiaohu',
          Adresse: „Nr. 1518, Jinshajiang Road, Bezirk Putuo, Shanghai“
        }, {
          Datum: '2016-05-06',
          Name: 'Wang Xiaohu',
          Adresse: „Jiangjun Avenue, Bezirk Jiangning, Nanjing“
        }, {
          Datum: '2016-05-07',
          Name: 'Wang Xiaohu',
          Adresse: „Jiangjun Avenue, Bezirk Jiangning, Nanjing“
        },, {
          Datum: '2016-05-04',
          Name: 'Wang Xiaohu',
          Adresse: „Nr. 1518, Jinshajiang Road, Bezirk Putuo, Shanghai“
        }, {
          Datum: '2016-05-01',
          Name: 'Wang Xiaohu',
          Adresse: „Nr. 1518, Jinshajiang Road, Bezirk Putuo, Shanghai“
        }, {
          Datum: '2016-05-08',
          Name: 'Wang Xiaohu',
          Adresse: „Nr. 1518, Jinshajiang Road, Bezirk Putuo, Shanghai“
        }, {
          Datum: '2016-05-06',
          Name: 'Wang Xiaohu',
          Adresse: „Nr. 1518, Jinshajiang Road, Bezirk Putuo, Shanghai“
        }, {
          Datum: '2016-05-07',
          Name: 'Wang Xiaohu',
          Adresse: „Nr. 1518, Jinshajiang Road, Bezirk Putuo, Shanghai“
        },{
          Datum: '2016-05-01',
          Name: 'Wang Xiaohu',
          Adresse: „Nr. 1518, Jinshajiang Road, Bezirk Putuo, Shanghai“
        }, {
          Datum: '2016-05-08',
          Name: 'Wang Xiaohu',
          Adresse: „Nr. 1518, Jinshajiang Road, Bezirk Putuo, Shanghai“
        }, {
          Datum: '2016-05-06',
          Name: 'Wang Xiaohu',
          Adresse: „Nr. 1518, Jinshajiang Road, Bezirk Putuo, Shanghai“
        }, {
          Datum: '2016-05-08',
          Name: 'Wang Xiaohu',
          Adresse: „Cultural Avenue, Bezirk Hongshan, Wuhan“
        }, {
          Datum: '2016-05-06',
          Name: 'Wang Xiaohu',
          Adresse: „Cultural Avenue, Bezirk Hongshan, Wuhan“
        }, {
          Datum: '2016-05-07',
          Name: 'Wang Xiaohu',
          Adresse: „Cultural Avenue, Bezirk Hongshan, Wuhan“
        }, {
          Datum: '2016-05-06',
          Name: 'Wang Xiaohu',
          Adresse: „Jiangjun Avenue, Bezirk Jiangning, Nanjing“
        }, {
          Datum: '2016-05-07',
          Name: 'Wang Xiaohu',
          Adresse: „Cultural Avenue, Bezirk Hongshan, Wuhan“
        },
      ]
    } 
  }, 
  Methoden: {
    btnClick(){
      dies.$nextTick(() => {this.getPdf();})
    },
  },  
}
</Skript>