将页面DOM导出为图片

前言

今天遇到个需求，需要将页面中显示的表格或者echarts图导出为图片文件

方法一：

安装插件

npm install html2canvas
或
yarn add html2canvas

引入插件

import html2canvas from 'html2canvas'

导出图片

// 获取要导出的DOM
const rect = document.querySelector('#chart').getBoundingClientRect()
html2canvas(document.querySelector('#chart'), {
	width: rect.width,
	height: rect.height
}).then(function (canvas) {
   const pageData = canvas.toDataURL('image/jpeg', 1.0)
   const imgData = pageData.replace('image/jpeg', 'image/octet-stream')
   const imgName = '生成图片.jpg'
   const save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')
   save_link.href = imgData 
   save_link.download = imgName 
   const event = document.createEvent('MouseEvents')
   event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
   save_link.dispatchEvent(event)
})

方法二：结合 dom-to-image 和 file-saver 插件

安装

npm install dom-to-image

import domtoimage from 'dom-to-image';

安装

npm install file-saver --save
# 如使用TS开发，可安装file-saver的TypeScript类型定义
npm install @types/file-saver --save-dev

import { saveAs } from 'file-saver'

主要方法和属性
方法：

domtoimage.toPng(…);将节点转化为png格式的图片
domtoimage.toJpeg(…);将节点转化为jpg格式的图片
domtoimage.toSvg(…);将节点转化为svg格式的图片，生成的图片的格式都是base64格式
domtoimage.toBlob(…);将节点转化为二进制格式，这个可以直接将图片下载
domtoimage.toPixelData(…);获取原始像素值，以Uint8Array 数组的形式返回，每4个数组元素表示一个像素点，即rgba值。这个方法也是挺实用的，可以用于WebGL中编写着色器颜色。

domtoimage.toBlob(this.$refs.$dom) // this.$refs.$dom 为DOM
      .then((blob) => {
        saveAs(blob, 'name.png')
      })