Vue How to export a page as an PDF file

This article example for everyone to share the Vue page exported to PDF file specific code, for your reference, the specific content is as follows

I in front-end position to achieve a visual chart page PDF file export, here to share the use of jsPDF and html2canvas package Vue page export into PDF method.

1. Download the npm package

npm install html2canvas
npm install jspdf

2. Create the plug-in. js file

The Vue-cli project is under the./utils folder, the nuxt framework I use here, so it is under the./plugins folder.

import html2Canvas from 'html2canvas';
import JsPDF from 'jspdf';

export default {
 install (Vue, options) {
  Vue.prototype.getPdf = function () {
   var title = this.pdfTitle; //  Exported pdf Filename 
   html2Canvas(document.querySelector(this.pdfSelector), { // Exported html Element 
    allowTaint: true
   }).then(function (canvas) {
    let contentWidth = canvas.width;
    let contentHeight = canvas.height;
    let pageHeight = contentWidth / 592.28 * 841.89;
    let leftHeight = contentHeight;
    let position = 0;
    let imgWidth = 595.28;
    let imgHeight = 592.28 / contentWidth * contentHeight;
    let pageData = canvas.toDataURL('image/jpeg', 1.0);
    let PDF = new JsPDF('', 'pt', 'a4');
    if (leftHeight < pageHeight) {
     PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
    } else {
     while (leftHeight > 0) {
      PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
      leftHeight -= pageHeight;
      position -= 841.89;
      if (leftHeight > 0) {
       PDF.addPage();
      }
     }
    }
    PDF.save(title + '.pdf');
   })
  }
 }
}

The above plug-in code can be copied directly, and then fill in your own parameters in the referenced Vue file.

3. Modify the reference page

The export button calls the getPdf method, and data fills in the parameters.

<template>
 <div id="pdfPrint">
    <!--  Call getPdf Method  -->
    <el-button @click="getPdf('#pdfPrint')"> Save as PDF</el-button>
 </div>
</template>

<script>
export default {
 data() {
  return {
   //  Fill in the exported pdf File name and html Element 
   pdfTitle: ' Factor evaluation report ',
   pdfSelector: '#pdfPrint',
  }
 },

That's probably it. It's very simple.