页面导出为pnf文件

安装

npm install jspdf --save

npm install --save html2canvas

引入

import html2Canvas from 'html2canvas'

import JsPDF from 'jspdf'

导出pnf文件并且导出文件时存在图片的处理

methods: {

   getPDF(){

     html2Canvas(document.querySelector('#pdfbar'), {

       useCORS: true,

      allowTaint: false

        // 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).replace('image/png', 'image/octet-stream');

        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')

      }

      )

   },

}

标签：canvas,image,导出,let,contentWidth,leftHeight,PDF,pnf,页面
来源： https://blog.csdn.net/xue_nahan/article/details/118938312