html2canvas 插件，将 DOM 节点转为图片，并下载

0背景与方案

产品需求：将一个带有纵向滚动的区域，保存为图片并下载。

经过调研：

1. 借助 html2canvas，将 dom 转为图片，借助 a 标签下载；
2. 纵向滚动只能将目前可视区域转为图片，隐藏部分无法转义。解决办法：创建两个 dom，一个 dom 有纵向滚动，用于页面展示；另一个 dom 用于 html2canvas 转义，需要将此 dom 设置隐藏于本页面可视区域，采用 css 即可：

position: fixed; 
z-index: -100;
right: -1000px

1安装 html2canvas

npm i html2canvas -S

或者：

yarn add html2canvas

2创建 utils.ts 文件（公用函数抽离封装）

import html2canvas from 'html2canvas';
/**
 * dom转为图片并下载
 * @param 
   dom:需要转移的DOM节点，如"#charts"
   Filename： 下载图片的名称
 */

const saveAsImgLoad = async(dom: string = '#charts', Filename: string = '统计') => {
  return html2canvas(document.querySelector(dom)!).then(canvas => {
    const imgUrl = canvas.toDataURL('image/jpeg');
    const image = document.createElement('img');
    image.src = imgUrl;
    const a = document.createElement('a');
    a.href = imgUrl;
    // 自定义图片的名称
    a.download = Filename;
    a.click();
  });
};
export { saveAsImgLoad }

3组件使用

import { saveAsImgLoad } from '@/utils.ts';

const load = async() => {
  await saveAsImgLoad('#chart', '分析统计');
};