前端vue的JsPDF html2canvas 根据html页面生成页面的pdfbase64字段

1.首先在文件内引入htmlToPdf.js

这里代码引入了html2canvas和jspdf

//需要 npm i html2Canvas 和 npm i jspdf

在这里将getPdf 这个函数挂载到Vue的原型上，最后return一个promise对象(包含了resolve的base64Pdf，以便于处理)，在局部组件内可进行.then以进行上传后端等操作。
插件代码如下

import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
    
    
  install(Vue) {
    
    
    /**
     * @param {*} reportName 下载时候的标题
     * @param {*} isDownload  是否下载默认为下载，传false不下载
     */
    Vue.prototype.getPdf = function (reportName, isDownload = true) {
    
    
      //     var target = document.getElementsByClassName("right-aside")[0];
      // target.style.background = "#FFFFFF";
      return new Promise((resolve, reject) => {
    
    
        html2Canvas(document.querySelector('#pdfDom'), {
    
    
          allowTaint: true,
          dpi: window.devicePixelRatio * 4
        }).then((canvas) => {
    
    
          let contentWidth = canvas.width
          let contentHeight = canvas.height
          //一页pdf显示html页面生成的canvas高度;
          let pageHeight = contentWidth / 592.28 * 841.89
          //未生成pdf的html页面高度
          let leftHeight = contentHeight
          //页面偏移
          let position = 0
          //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
          let imgWidth = 595.28
          let imgHeight = 592.28 / contentWidth * contentHeight
          let pageData = canvas.toDataURL('image/jpeg', 1.0)
          let PDF = new JsPDF('', 'pt', 'a4',true)
          //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
          //当内容未超过pdf一页显示的范围，无需分页
          if (leftHeight < pageHeight) {
    
    
            PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight,undefined, 'FAST')
          } else {
    
    
            while (leftHeight > 0) {
    
    
              PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight,undefined, 'FAST')
              leftHeight -= pageHeight
              position -= 841.89
              //避免添加空白页
              if (leftHeight > 0) {
    
    
                PDF.addPage()
              }
            }
          }
          if (isDownload) {
    
    
            PDF.save(reportName + '.pdf')
          }
          //别的方法：pdf.output("dataurlstring").split("base64,")[1]是base64，
          //实际上pdf.output("dataurlstring")就是base64
          //const dataurl = `data:application/pdf;base64,${PDF.output('dataurlstring').split('base64,')[1]}`
          var pdfData = PDF.output('datauristring')//获取base64Pdf
          resolve(pdfData)
        }
        )
      })
    }
  }
}

2、接下在main.js直接引入刚刚的代码文件

import htmlToPdf from '@/utils/htmlToPdf'
Vue.use(htmlToPdf)

3、在局部组件中使用

methods:{
    
    
	getpdf(){
    
    
		this.getPdf('六一儿童节快乐', false) //.then得到的值是base64位的pdf文件
		.then((res) => {
    
    
		  	console.log('base64------',res)
		  	//若有页面跳转，要在then函数里执行，意思就是等pdf文件流生成后再跳走，否则跳走之后，生成pdfbase64字段的函数就获取不到页面DOM了，会报错
		}).catch(err => {
    
    
			console.log('base64------',err)
		})
	}
}

备注：若有页面跳转，要在then函数里执行，意思就是等pdf文件流生成后再跳走，否则跳走之后，生成pdfbase64字段的函数就获取不到页面DOM了，会报错

参考链接：
1、https://blog.csdn.net/qq_38594056/article/details/118212082
2、https://blog.csdn.net/shidaione/article/details/119715891