How to generate PDF and download it in Vue front-end

//Convert the page html into an image npm install html2canvas --save  
// Generate a pdf from the image
npm install jspdf --save

import htmlToPdf from '@/utils/htmlToPdf';
// Using the Vue.use() method will call the install method in the tool method Vue.use(htmlToPdf);

let pdf = new jsPDF('p', 'pt', [pdfX, pdfY]);
The first parameter: l: horizontal p: vertical The second parameter: measurement unit ("pt", "mm", "cm", "m", "in" or "px");
The third parameter: can be in the following format, the default is "a4". For a custom format, just pass the size as a numeric array, like: [592.28, 841.89];
		   a0 - a10
		   b0 - b10
		   c0 - c10
  		   dl
		   letter
		   government-letter
		   legal
		   junior-legal
		   ledger
		   tabloid
		   credit card

let targetPage = pdf.internal.getNumberOfPages(); //Get the total pages pdf.deletePage(targetPage); //Delete the target page

pdf.save(`test.pdf`);

// Export the page to PDF format import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default{
  install (Vue, options) {
    Vue.prototype.getPdf = function () {
      // When downloading PDF, if it is not at the top of the page, the PDF style will be incorrect, so go back to the top of the page and then download let top = document.getElementById('pdfDom');
      if (top != null) {
        top.scrollIntoView();
        top = null;
      }
      let title = this.exportPDFtitle;
      html2Canvas(document.querySelector('#pdfDom'), {
        allowTaint: true
      }).then(function (canvas) {
        // Get the width and height of the canvas let contentWidth = canvas.width;
        let contentHeight = canvas.height;
	      // The height of the canvas generated by a pdf page displaying the html page;
        let pageHeight = contentWidth / 841.89 * 592.28;
	      //Height of HTML page without PDF generation let leftHeight = contentHeight;
	      // Page offset let position = 0;
	      // The width and height of the canvas image generated by the HTML page in the PDF (in this case: horizontal A4 paper [841.89, 592.28], the vertical size needs to be changed)
        let imgWidth = 841.89;
        let imgHeight = 841.89 / contentWidth * contentHeight;
        let pageData = canvas.toDataURL('image/jpeg', 1.0);
        let PDF = new JsPDF('l', 'pt', 'a4');
        // Two heights need to be distinguished: one is the actual height of the HTML page, and the other is the height of the generated PDF page. // When the content does not exceed the range of one PDF page, no paging is required 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 -= 592.28;
            // Avoid adding blank pages if (leftHeight > 0) {
              PDF.addPage();
            }
          }
        }
        PDF.save(title + '.pdf')
      })
    }
  }
}

<template>
  <div class="wrap" >
    <div id="pdfDom" style="padding: 10px;">
      <el-table
        :data="tableData"
        border>
        <el-table-column prop="date" label="Date" width="250"></el-table-column>
        <el-table-column prop="name" label="姓名" width="250"></el-table-column>
        <el-table-column prop="address" label="Address"></el-table-column>
      </el-table>
    </div>
    <button type="button" style="margin-top: 20px;" @click="btnClick">Export PDF</button>
  </div>

</template>
 
<script>
export default {
  data() { 
    return {
      exportPDFtitle: "Page export PDF file name",
      tableData: [
         {
          date: '2016-05-06',
          name: 'Wang Xiaohu',
          address: 'Huoju Avenue, Jiulongpo District, Chongqing'
        }, {
          date: '2016-05-07',
          name: 'Wang Xiaohu',
          address: 'Huoju Avenue, Jiulongpo District, Chongqing'
        },{
          date: '2016-05-03',
          name: 'Wang Xiaohu',
          address: 'No. 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-02',
          name: 'Wang Xiaohu',
          address: 'No. 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-04',
          name: 'Wang Xiaohu',
          address: 'No. 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-01',
          name: 'Wang Xiaohu',
          address: 'No. 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-08',
          name: 'Wang Xiaohu',
          address: 'No. 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-06',
          name: 'Wang Xiaohu',
          address: 'No. 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-06',
          name: 'Wang Xiaohu',
          address: 'No. 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-07',
          name: 'Wang Xiaohu',
          address: 'No. 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-01',
          name: 'Wang Xiaohu',
          address: 'No. 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-08',
          name: 'Wang Xiaohu',
          address: 'No. 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-06',
          name: 'Wang Xiaohu',
          address: 'No. 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-07',
          name: 'Wang Xiaohu',
          address: 'No. 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-06',
          name: 'Wang Xiaohu',
          address: 'Jiangjun Avenue, Jiangning District, Nanjing'
        }, {
          date: '2016-05-07',
          name: 'Wang Xiaohu',
          address: 'Jiangjun Avenue, Jiangning District, Nanjing'
        },, {
          date: '2016-05-04',
          name: 'Wang Xiaohu',
          address: 'No. 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-01',
          name: 'Wang Xiaohu',
          address: 'No. 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-08',
          name: 'Wang Xiaohu',
          address: 'No. 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-06',
          name: 'Wang Xiaohu',
          address: 'No. 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-07',
          name: 'Wang Xiaohu',
          address: 'No. 1518, Jinshajiang Road, Putuo District, Shanghai'
        },{
          date: '2016-05-01',
          name: 'Wang Xiaohu',
          address: 'No. 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-08',
          name: 'Wang Xiaohu',
          address: 'No. 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-06',
          name: 'Wang Xiaohu',
          address: 'No. 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-08',
          name: 'Wang Xiaohu',
          address: 'Cultural Avenue, Hongshan District, Wuhan'
        }, {
          date: '2016-05-06',
          name: 'Wang Xiaohu',
          address: 'Cultural Avenue, Hongshan District, Wuhan'
        }, {
          date: '2016-05-07',
          name: 'Wang Xiaohu',
          address: 'Cultural Avenue, Hongshan District, Wuhan'
        }, {
          date: '2016-05-06',
          name: 'Wang Xiaohu',
          address: 'Jiangjun Avenue, Jiangning District, Nanjing'
        }, {
          date: '2016-05-07',
          name: 'Wang Xiaohu',
          address: 'Cultural Avenue, Hongshan District, Wuhan'
        },
      ]
    } 
  }, 
  methods: {
    btnClick(){
      this.$nextTick(() => {this.getPdf();})
    },
  },  
}
</script>