将HTML页面内容转为图片并下载及浏览器打印功能

最近公司在做一个考试的网站，而需求是准考证展示后可以打印，也可以转为图片并下载，打印调用浏览器的打印功能即可，转为图片我第一时间想到了html2canvas，不过还是在网上多翻了翻，看看有没有其他便捷的方法，最后记录了两种简单实用的方法。

一、html2canvas

1.1 安装插件

npm install --save html2canvas

yarn add html2canvas

1.2 导入模块（ES6）

import html2canvas from 'html2canvas';

1.3 转换为图片并下载

 	const dom = document.getElementById('targetDom');
    if(dom !== null) {
      html2canvas(dom, { scale: window.devicePixelRatio }).then((canvas) => {
        const dataURL = canvas.toDataURL('image/png');
        if (dataURL !== '') {
          const alink = document.createElement('a');
          alink.href = dataURL;
          alink.download = 'ImageName.png'; // 设置下载的文件名
          alink.click();
          alink.remove() // 下载之后把创建的元素删除
        }
      });
    }

二、dom-to-image

2.1 安装插件

npm install dom-to-image

yarn add dom-to-image

2.2 导入模块（ES6）

import domtoimage from 'dom-to-image';

2.3 转换为图片并下载

	const node = document.getElementById('table');
    // 先用domtoimage获取到HTML转化后图片后，已base64方式保存
    domtoimage.toPng(node)
      .then((dataUrl) => {
        const img = new Image();
        img.src = dataUrl;

        // 将获取到的base64下载下来
        const imgUrl = img.src;
 
        if (window.navigator.msSaveOrOpenBlob) {
          const bstr = atob(imgUrl.split(',')[1]);
          let n = bstr.length;
          const u8arr = new Uint8Array(n);
          while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
          }
          const blob = new Blob([u8arr]);
          window.navigator.msSaveOrOpenBlob(blob, 'chart-download' + '.' + 'png');
        } else {
          // 这里就按照chrome等新版浏览器来处理
          const a = document.createElement('a');
          a.href = imgUrl;
          a.setAttribute('download', 'chart-download');
          a.click();
        }
      });

三、 另附调用浏览器打印功能代码

 	const dom = document.getElementById('target');
    const newwindow = window.open();
    if(dom !== null && newwindow) {
      newwindow.document.body.innerHTML= dom.outerHTML;
      newwindow.print();
      newwindow.close();
    }

注：第二种方法我并未尝试，因为我觉得第一种更加简单，且html2canvas在gitHub的星星数量要远远高于dom-to-image。