1. 下载 html2canvas，下载 jsPDF
vue引入的形式
npm install --save html2canvas
npm i jspdf --save
在vue文件中使用，这样前期的准备工作就完成了
import html2canvas from 'html2canvas';import JsPDF from 'jspdf';
2. 将DOM元素渲染成canvas，并下载，html2canvas最基本的用法
// elementId，是你要渲染的DOM的ID值，这个ID以下的所有内容都会被渲染出来html2canvas(elementId).then((canvas) => {// 将图片转化成base64字符串var imgUrl = canvas.toDataURL('image/png');// 创建一个a标签，用来下载图片var eleLink = document.createElement('a');// 转换后的图片地址eleLink.href = imgUrl;// 文件名设置eleLink.download = '默认文件名';// 下载eleLink.click();});});
3. 将 png 转化成 pdf
html2canvas(elementId).then((canvas) => {// 将图片转化成base64字符串var imgUrl = canvas.toDataURL('image/png');// 实例化一个PDF对象，三个参数分别是// 1.排列方式 2.像素单位 3.[宽,高]var pdf = new JsPDF('landscape', 'pt', [200, 200]);// 将图片转化为dataUrlpdf.addImage(imgUrl, 'PNG', 0, 0, 200, 200);// 下载保存PDF，参数是下载下来的文件名pdf.save(`默认文件名.pdf`);});
4. 封装成函数
import html2canvas from 'html2canvas';import JsPDF from 'jspdf';/*** 参数* elementId : 所要截图元素的id，id值在这个单页面中应该是唯一值* printName : 导出图片的名字* img2Pdf : 是否转化为PDF格式，默认false，不导出pdf*/export function print(elementId, printName = '导出图', img2Pdf = false) {// dpi : 表示导出图片的清晰度，数值越高清晰度越高// 这里说的其实不是很详细，详细可以去这个博客看看【/weixin_41863239/article/details/85248545】return new Promise((resolve) => {html2canvas(elementId, {dpi: 300 }).then((canvas) => {// 将图片转化成base64字符串var imgUrl = canvas.toDataURL('image/png');// img2Pdf为true，转化成PDFif (img2Pdf) {getImgSize(imgUrl).then((res) => {// 实例化一个PDF对象，三个参数分别是// 1.排列方式 2.像素单位 3.[宽,高]var pdf = new JsPDF('landscape', 'pt', [res.width, res.height]);// 将图片转化为dataUrlpdf.addImage(imgUrl, 'PNG', 0, 0, res.width, res.height);// 下载保存PDF，参数是下载下来的文件名pdf.save(`${printName}.pdf`);resolve();});return;}if (!img2Pdf) {// 创建一个a标签，用来下载图片var eleLink = document.createElement('a');// 转换后的图片地址eleLink.href = imgUrl;// 文件名设置eleLink.download = printName;// 下载eleLink.click();resolve();return;}});});}// TODO: img.onload本质是一个异步函数，必须等这个异步函数执行完成后，才能执行其他函数function getImgSize(imgUrl) {// img.onload本质是一个异步函数，必须等这个异步函数执行完成后，才能获取他的宽高// 否则极有可能获取undefined，这里非常坑return new Promise((resolve) => {// 创建一个img元素var imgTemp = document.createElement('img');// 赋值imgTemp.src = imgUrl;// img.onload函数，定义图片加载完成后的函数，只有图片加载完成后才能拿到他的宽高，要不然也都是undefinedimgTemp.onload = () => {// 定义图片对象，保存宽高let imgObj = {width: imgTemp.width,height: imgTemp.height,};// 返回宽高resolve(imgObj);};});}
