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

该博客介绍了如何在Vue.js应用中利用html2canvas和jspdf库动态生成PDF文件,并提供下载功能。通过在Vue原型上挂载getPdf函数,该函数将指定的DOM元素转换为PDF,处理分页和内容调整,然后保存或返回Base64编码的PDF数据。在main.js中引入并注册该功能后,可以在局部组件中调用并进行后续操作,如文件下载或处理。注意事项包括确保在生成PDF完成后再进行页面跳转,以避免DOM丢失导致的错误。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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.youkuaiyun.com/qq_38594056/article/details/118212082
2、https://blog.youkuaiyun.com/shidaione/article/details/119715891

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值