React将htmlcanvas报表转为docx并下载_react antd 导出html为word 含canvas-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45221036/article/details/120181222

该博客介绍了如何在React应用中将包含Canvas图表的HTML页面转换为docx文件并进行下载。通过向后端请求数据，解析并渲染为HTML，再利用file-saver和htmlDocx库完成转换及下载过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路：向后端请求数据，解析结果，渲染成相应的图表文字形成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
        `${params.customerName} - 交付报告.docx`
    )
    //为了导出静态docx，用image替换了canvas，需要重新加载canvas！！！
    setTimeout(() => window.location.reload(), 0)
}

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

<div id="JS-container">
    <h2 style={{ textAlign: 'center' }}>{params.customerName} - 交付报告</h2>
    <h3>一. 机器人整体价值</h3>
    <TaskChart
        loading={implementExporting}
        inTrace
        withCard={false}
        onChartReady={collectChartInstance}//获取echart实例
        xData={pickDataFieldKeys('day_total')}
        yNames={['时长']}
        yTypes={['line']}
        yDatas={[pickDataFiledValues('day_total', 'rs_human_save_hours')]}
        options={GET_CHART_OPTIONS(1, { text: '人机协作节约时长分析' })}
        />
    <h4>
        1.2跟单-咨询未下单收益
        <br />
        咨询未下单，交付期间（{params.start_date}到{params.end_date}日），总共催拍挽回金额
        {sum(pickDataFiledValues('ask_day_total', 'conversion_payment', formatMoney))}元
    </h4>
    <TaskChart
        loading={implementExporting}
        inTrace
        withCard={false}
        onChartReady={collectChartInstance}//获取echart实例
        xData={pickDataFieldKeys('ask_day_total')}
        yNames={['金额']}
        yTypes={['line']}
        yDatas={[pickDataFiledValues('ask_day_total', 'conversion_payment', formatMoney)]}
        options={GET_CHART_OPTIONS(1, { text: '咨询未下单收益分析' })}
        />
    //...
</div>

导出前：
在这里插入图片描述
导出后：