React将htmlcanvas报表转为docx并下载

思路：向后端请求数据，解析结果，渲染成相应的图表文字形成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 = ``
    })
    
    //找到需要导出的html容器
    const $container: HTMLDivElement = document.querySelector('#JS-container')
    
    saveAs(//保存文件到本地
        htmlDocx.asBlob(`${$container.outerHTML}`),//将html转为docx
        `${params.customerName} - 交付报告.docx`
    )
    //为了导出静态docx，用image替换了canvas，需要重新加载canvas！！！
    setTimeout(() => window.location.reload(), 0)
}

//当echart图表加载好的时候，将每一个echart实例保存在echartsRef数组中
const collectChartInstance = instance => {
    echartsRef.current = [...echartsRef.current, instance]
}


    
{params.customerName} - 交付报告
    
一. 机器人整体价值
    
    

        1.2跟单-咨询未下单收益
        

        咨询未下单，交付期间（{params.start_date}到{params.end_date}日），总共催拍挽回金额
        {sum(pickDataFiledValues('ask_day_total', 'conversion_payment', formatMoney))}元
    
    
    //...

导出前：

导出后：