vue实现导出echarts图片和table表格

安装依赖

    "xlsx": "^0.18.5","xlsx-style": "^0.8.13""file-saver": "^2.0.5",

工具类

toolUtil

const autoHeight = () => {let winHeight = 0if (window.innerHeight) {winHeight = window.innerHeight} else if (document.body && document.body.clientHeight) {winHeight = document.body.clientHeight}if (document.documentElement && document.documentElement.clientHeight) {winHeight = document.documentElement.clientHeight}return winHeight
}const toParams = (params) => {let par = "";for (let p in params) {if (params[p] != null && params[p] != "") {par += '&' + p + '=' + encodeURIComponent(params[p])}}if (par.length > 0) {par = par.substring(1, par.length)}return par
}const formatTime = (date = new Date(), fmt = 'yyyy-MM-dd hh:mm:ss') => {if (typeof date === 'string') {date = date.replace(/-/g, '/')}date = new Date(date)const o = {'M+': date.getMonth() + 1, // 月份'd+': date.getDate(), // 日'h+': date.getHours(), // 小时'm+': date.getMinutes(), // 分's+': date.getSeconds(), // 秒'q+': Math.floor((date.getMonth() + 3) / 3), // 季度'S+': date.getMilliseconds(), // 毫秒w: date.getDay() // 周}if ((/(y+)/).test(fmt)) {fmt = fmt.replace(RegExp.$1, `${date.getFullYear()}`.substr(4 - RegExp.$1.length))}for (const k in o) {if (new RegExp(`(${k})`).test(fmt)) {fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : `00${o[k]}`.substr(`${o[k]}`.length))}}return fmt
}const exportChartAsImage = (chartInstance, imageName) => {const type = 'png';const imgData = chartInstance.getDataURL({type: type,pixelRatio: 2,backgroundColor: '#fff'});const img = new Image();img.src = imgData;img.crossOrigin = 'Anonymous';img.onload = function () {const canvas = document.createElement('canvas');canvas.width = img.width;canvas.height = img.height;const ctx = canvas.getContext('2d');ctx.drawImage(img, 0, 0);const a = document.createElement('a');a.href = canvas.toDataURL('image/png');a.download = imageName || 'chart';a.click();};
}const generateRandomColor=()=> {const r = Math.floor(Math.random() * 256).toString(16); // 生成一个0至255之间的随机数并转换为16进制const g = Math.floor(Math.random() * 256).toString(16);const b = Math.floor(Math.random() * 256).toString(16);// 如果生成的16进制数不是两位的，补0return `#${r.padStart(2, '0')}${g.padStart(2, '0')}${b.padStart(2, '0')}`;}export default {autoHeight,toParams,formatTime,exportChartAsImage,generateRandomColor
}

xlsxUtil

import * as XLSX from 'xlsx'
import XLSXStyle from 'xlsx-style'
import FileSaver from 'file-saver'const setExlStyle = (data) => {// 单元格外侧框线let borderAll = {top: {style: 'thin'},bottom: {style: 'thin'},left: {style: 'thin'},right: {style: 'thin'}}data['!cols'] = []for (let key in data) {if (data[key] instanceof Object) {data[key].s = {border: borderAll,alignment: {horizontal: 'center',vertical: 'center'},font: {sz: 11},bold: true,numFmt: 0}data['!cols'].push({wpx: 70})}}return data
}const addRangeBorder = (range, ws) => {let cols = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']range.forEach(item => {let style = {s: {border: {top: { style: 'thin' },left: { style: 'thin' },bottom: { style: 'thin' },right: { style: 'thin' }}}}// 处理合并行for (let i = item.s.c; i <= item.e.c; i++) {ws[`${cols[i]}${Number(item.e.r) + 1}`] = ws[`${cols[i]}${Number(item.e.r) + 1}`] || style// 处理合并列for (let k = item.s.r + 2; k <= item.e.r + 1; k++) {ws[cols[i] + k] = ws[cols[k] + item.e.r] || style}}})return ws
}const exportXlsx = (id, fileName = '文件', isMerge = false) => {if (id == null) {return}let ws = XLSX.utils.table_to_sheet(document.querySelector(id), { raw: true })let wb = XLSX.utils.book_new()XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')setExlStyle(wb['Sheets']['Sheet1'])if (isMerge) {addRangeBorder(wb['Sheets']['Sheet1']['!merges'], wb['Sheets']['Sheet1'])}let wbout = XLSXStyle.write(wb, {// bookType: 'xlsx',// bookSST: true,// type: 'array'type: 'buffer'})try {FileSaver.saveAs(new Blob([wbout], {type: 'application/octet-stream',}), fileName + '.xlsx')} catch (e) {if (typeof console !== 'undefined') console.log(e, wbout)}return wbout
}export default {exportXlsx,setExlStyle,addRangeBorder
}

使用方式

import toolUtil from "@/utils/toolUtil";
import xlsxUtil from "@/utils/xlsxUtil";exportExcel() {// 初始化后额eChart实例对象let myChart = this.$refs.LineChartRef.chart;toolUtil.exportChartAsImage(myChart,`年度视力统计`);// #idTable 位table的idxlsxUtil.exportXlsx("#idTable",`年度视力统计`,true);},