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

小灰灰 2022-09-07 15:58 388阅读 0赞

## 1. [下载 html2canvas][html2canvas]，[下载 jsPDF][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.csdn.net/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);
        };
      });
    }

[html2canvas]: http://html2canvas.hertzen.com/
[jsPDF]: http://www.rotisedapsales.com/snr/cloud2/website/jsPDF-master/docs/index.html