前端页面截图，指定区域截图

前言

由于业务需要,需要将页面的指定区域保存为一张图片(其实就是一个很华丽呼哨的表格,前端我画出来了，后端没搞出来，后面就改需求为前端导出为图片,手动狗头一波…)

准备

使用 html2canvas 这个插件，还是很不错的东西,安利一波

npm install html2canvas
yarn add html2canvas

代码

抽了两个函数,看着用吧，应该是没啥问题的。（ps：让你传选择器就传选择器，别问我为什么导出来是空白图片）

import html2canvas from 'html2canvas'

const _fixType = type => 'image/' + type.toLowerCase().replace(/jpg/i, 'jpeg').match(/png|jpeg|bmp|gif/)[0]
const saveFile = (data, filename) => {
        const save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
        save_link.href = data;
        save_link.download = filename;
        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);
};


/**
 * 
 * @param {*} ele       // dom节点选择器 ！！！！选择器,传选择器,谢谢
 * @param {*} type      // 导出图片类型
 * @param {*} fileName  // 导出图片名
 */

export default function getReportImage(ele, type, fileName) {
        html2canvas(document.querySelector(ele)).then(canvas => {
                let imgData = canvas.toDataURL(type);
                imgData = imgData.replace(_fixType(type), 'image/octet-stream');
                saveFile(imgData, `${fileName}.${type}`);
                return 0
        })
} 

使用

import getReportImage from '../Tools';


onClick={() => {getReportImage('dom选择器', '导出的类型', `导出的名字`)}}
// onClick={() => {getReportImage('.table', 'jpg', `花里胡哨表格`)}}