vue使用 html2canvas 导出页面，及将图片转成 pdf 格式

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]);
	// 将图片转化为dataUrl
	pdf.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 : 表示导出图片的清晰度，数值越高清晰度越高
  // 这里说的其实不是很详细，详细可以去这个博客看看【https://blog.youkuaiyun.com/weixin_41863239/article/details/85248545】
  return new Promise((resolve) => {
    html2canvas(elementId, { dpi: 300 }).then((canvas) => {
      // 将图片转化成base64字符串
      var imgUrl = canvas.toDataURL('image/png');
      // img2Pdf为true，转化成PDF
      if (img2Pdf) {
        getImgSize(imgUrl).then((res) => {
          // 实例化一个PDF对象，三个参数分别是
          // 1.排列方式  2.像素单位  3.[宽,高]
          var pdf = new JsPDF('landscape', 'pt', [res.width, res.height]);
          // 将图片转化为dataUrl
          pdf.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函数，定义图片加载完成后的函数，只有图片加载完成后才能拿到他的宽高，要不然也都是undefined
    imgTemp.onload = () => {
      // 定义图片对象，保存宽高
      let imgObj = {
        width: imgTemp.width,
        height: imgTemp.height,
      };
      // 返回宽高
      resolve(imgObj);
    };
  });
}