vue中html2canvas的使用

Html2canvas是什么?

是一个脚本 这个脚本可以允许用户直接在浏览器上拍摄网页或其中一部分的"屏幕截图".屏幕截图是基于DOM,因此可能无法真实表示100％的准确度，因为它无法生成实际的屏幕截图，而是根据页面上的可用信息构建屏幕截图。

一、安装html2canvas

npm install --save html2canvas

二、使用

import html2Canvas from 'html2canvas';

const getJpeg = dom => {
  return new Promise(resolve => {
    html2Canvas(dom).then(canvas => {
      const jpeg = canvas.toDataURL('image/jpeg', 1.0);
      // resolve(new Blob([jpeg]));
      resolve(base64ToFile(jpeg));
    });
  });
};
// base64
const base64ToFile = urlData => {
  const arr = urlData.split(',');
  const mime = arr[0].match(/:(.*?);/)[1];
  const bytes = atob(arr[1]);
  let n = bytes.length;
  const ia = new Uint8Array(n);
  while (n--) {
    ia[n] = bytes.charCodeAt(n);
  }
  return new File([ia], 'jpeg', { type: mime });
};

export default getJpeg;

二、应用

const echartsEvn = await getJpeg(document.querySelector('#echartsEvn'));