vue前端实现将页面显示内容生成pdf文件的几种方法，html2canvas、dom-to-image、jspdf（带分页）基本使用以及介绍

实际开发需求：Vue项目中，根据数据结构生成echarts图表组件，生成带有样式的图表以后，点击下载按钮，把图表以pdf格式的文件下载到本地
实现思路：将vue界面的echarts组件生成图片，然后使用插件将生成的图片放入pdf中，再实现pdf文件的下载
涉及框架以及插件：vue、echarts、html2canvas、dom-to-image、jspdf

插件介绍：

vue、echarts 不用多说，vue前端的框架，echarts用来根据数据生成的带有样式效果的图表；html2canvas与dom-to-image都是将界面上的dom生成图片。

html2canvas

能够实现在用户浏览器端直接对整个或部分页面进行生成图片，主要是将选中的页面或者整个页面渲染成一个canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现。可以通过获取HTML的某个元素，然后生成Canvas，从而生成图片。

安装npm install --save html2canvas或 yarn add html2canvas引入import html2canvas from 'html2canvas';

用法：

  测试
methods(){  getImage(){    html2canvas(document.querySelector("#myDom1")).then(canvas => {        console.loGo(canvas)        document.body.appendChild(canvas);        var dataUrl = canvas.toDataURL("image/png")    });  }}

dom-to-image

它可以将任意DOM节点转换成用javascript编写的矢量（SVG）或光栅（PNG或JPEG）图像。

安装npm install dom-to-image或 yarn add dom-to-image引入import domtoimage from 'dom-to-image';或 var domtoimage = require('dom-to-image');

基本用法：

methods(){  getDomToImage(){    let dom = document.getElementById('myDom');    domtoimage.toPng(dom).then(function (dataUrl) {        var img = new Image();        img.src = dataUrl;        document.body.appendChild(img);    })    .catch(function (error) {        console.error('wrong!', error);    });  }}

获取一个png的blob：

domtoimage.toBlob(document.getElementById('myDom')).then(function (blob) {        console.log(blob)});

jspdf

jsPDF 是一个使用 Javascript 语言生成 PDF 的开源库。你可以在 Firefox 插件，服务端脚本或是浏览器脚本中使用它。

安装：npm install jspdf或 yarn add jspdf引入import jsPDF from "jspdf"

基本用法：

let pdf = new jsPDF('p', 'pt', 'a4);参数1：l：横向  p：纵向参数2：单位（"pt"，"mm", "cm", "m", "in" or "px"）参数3：格式，默认为“a4”

常用方法：

pdf.addPage()  在PDF文档中添加新页面，参数如下，也可以不设置，默认a4pdf.addImage()  将图像添加到PDF中pdf.save(`保存的PDF文件.pdf`); 保存为pdf格式的文件

回到需求：vue项目中，根据数据结构生成echarts图表组件，生成带有样式的图表以后，点击下载按钮，把图表以pdf格式的文件下载到本地(带分页)，部分代码如下（思路）

1.使用html2canvas

methods(){  let node = document.getElementById('pdfDom');html2canvas(document.getElementById('pdfDom'), {scale: 2}).then(function (canvas) {var pdfWidth = canvas.width;var pdfHeight = canvas.height;var pageHeight = pdfWidth / 592.28 * 841.89;var leftHeight = pdfHeight;var position = 0;var imgWidth = 595.28;var imgHeight = 595.28 / pdfWidth * pdfHeight;var pageData = canvas.toDataURL("img/jpeg", 1.0);var pdf = new jsPDF('', 'pt', 'a4');// 判断打印dom高度是否需要分页，如果需要进行分页处理if (leftHeight < pageHeight) {pdf.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight)} else {while (leftHeight > 0) {pdf.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight)leftHeight -= pageHeightposition -= 841.89if (leftHeight > 0) {pdf.addPage()}}}const aLink = document.createElement('a')document.body.appendChild(aLink)const url = URL.createObjectURL(_this.toBlob(pdf.output('datauristring')))aLink.href = urllet date = new Date()let year = date.getFullYear()let month = (date.getMonth() + 1).toString().padStart(2, 0)let day = date.getDate().toString().padStart(2, 0)let hour = date.getHours().toString().padStart(2, 0)let minutes = date.getMinutes().toString().padStart(2, 0)let seconds = date.getSeconds().toString().padStart(2, 0)aLink.download = '保存的PDF文件-' + '.pdf'aLink.click()window.URL.revokeObjectURL(url)})}

2.使用dom-to-image

methods(){  let node = document.getElementById('pdfDom');domtoimage.toJpeg(node, {width: node.clientWidth,height: node.clientHeight,cacheBust: true,style: {margin: 0,background: '#fff',}}).then(function (dataUrl) {console.log(node.clientWidth)that.canvasWidth = node.clientWidth;that.canvasHeight = node.clientHeight;let imgObj = new Image()imgObj.src = dataUrl;document.documentElement.scrollTop = 0//待图片加载完后，将其显示在canvas上imgObj.onload = function (img) {let canvas = document.getElementById("canvasDom");console.log(canvas.width, canvas.height, 'canvas.width')canvas.getContext("2d").drawImage(imgObj, 0, 0, that.canvasWidth, that.canvasHeight); //将图片绘制到canvas中let contentWidth = canvas.widthlet contentHeight = canvas.heightlet pageHeight = contentWidth / 592.28 * 841.89let leftHeight = contentHeightlet position = 0let imgWidth = 595.28let imgHeight = 592.28 / contentWidth * contentHeightlet pageData = canvas.toDataURL('image/jpeg', 1.0)let PDF = new jsPDF('', 'pt', 'a4')if (leftHeight < pageHeight) {PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight) // 大于1页高度时分页} else {while (leftHeight > 0) {PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)leftHeight -= pageHeightposition -= 841.89if (leftHeight > 0) {PDF.addPage()}}}const aLink = document.createElement('a')document.body.appendChild(aLink)const url = URL.createObjectURL(that.toBlob(PDF.output('datauristring')))aLink.href = urllet date = new Date()let year = date.getFullYear()let month = (date.getMonth() + 1).toString().padStart(2, 0)let day = date.getDate().toString().padStart(2, 0)let hour = date.getHours().toString().padStart(2, 0)let minutes = date.getMinutes().toString().padStart(2, 0)let seconds = date.getSeconds().toString().padStart(2, 0)aLink.download = '保存的PDF文件-' + '.pdf'aLink.click()window.URL.revokeObjectURL(url)}return dataUrl}).catch(function (error) {console.error('wrong!', error);});}

来源地址：https://blog.csdn.net/weixin_48138187/article/details/129280930