思路:向后端请求数据,解析结果,渲染成相应的图表文字形成html页面。使用file-saver和htmlDocx库来实现导出下载doc文件
import { saveAs } from 'file-saver'
import htmlDocx from 'html-docx-js/dist/html-docx'
const handleExport = () => {
echartsRef.current.forEach(instance => {
const $chartDom: HTMLDivElement = instance.getDom()
//直接在echart的容器中用image标签替换掉之前的canvas标签
$chartDom.innerHTML = `<image src="${instance.getDataURL({
pixelRatio: 10,
})}" style="display: block;" width="614" height="286" />`
})
//找到需要导出的html容器
const $container: HTMLDivElement = document.querySelector('#JS-container')
saveAs(//保存文件到本地
htmlDocx.asBlob(`<!DOCTYPE html><html lang="en">${$container.outerHTML}</html>`),//将html转为docx