Vue page exports PDF

1. Download dependence
   YARN ADD HTML2CANVAS // Convert page HTML to a picture
   YARN ADD JSPDF // Generate PDF
2. Define global functions, create htmltopdf.js files

import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
  install (Vue, options) {
    Vue.prototype.getPdf = function (idStr, title) {
      html2Canvas(document.querySelector('#' + idStr), {
        // allowTaint: true,
        useCORS: true
      }).then(function (canvas) {
        const contentWidth = canvas.width
        const contentHeight = canvas.height
        // One page PDF shows the CANVAS height generated by the HTML page;
        const pageHeight = contentWidth / 592.28 * 841.89
        / / Generate the HTML page height of the PDF
        let leftHeight = contentHeight
        // Page offset
        let position = 0
        // A4 paper size [595.28, 841.89], the HTML page generated canvas in PDF in PDF
        const imgWidth = 595.28
        const imgHeight = 592.28 / contentWidth * contentHeight
        // canvas.crossOrigin="anonymous";
        const pageData = canvas.toDataURL('image/jpeg', 1.0)

        const PDF = new JsPDF('', 'pt', 'a4')
        // There are two highly need to distinguish, one is the actual height of the HTML page, and generates PDF page height (841.89)
        // When the content does not exceed the scope of the PDF page display, no paging
        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) {
              / / Avoid adding a blank page
              PDF.addPage()
            }
          }
        }
        PDF.save(title + '.pdf')
      })
    }
  }
}

3. Use in main.js

import htmlToPdf from '@/components/htmlToPdf/htmlToPdf'

Vue.use(htmlToPdf)

4. Page call method in use

<template>
  <div class="row" id="pdfDom" style="padding-top: 55px;background-color:#fff;">
    // PDF wants to display the content
  </div>
</template>
<script>
export default {
  data () {
    return {}
  },
  method: {
    / / Click to call the method
    htmlToPdf () {
      this.getPdf('pdfDom', 'Inspection task report')
    },
  }
}
</script>