react绘制导出word

本文介绍如何在React中使用原生table标签及Antd组件绘制复杂表格,并通过mhtml-to-word库将页面内容导出为Word文档,包括安装配置、代码示例及自定义样式等关键信息。

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

绘制word:

方法一、原生table融入

注意:(详情参考https://blog.csdn.net/Run_youngman/article/details/88648784

  • < table >标签不能直接和< tr >标签直接接触,在中间可以添加一个< tbody >标签
  • < table >的border=1标签,要变成css属性,给td标签添加css属性border:1px solid #000;
  • colspan 在react中要变成colSpan这样的驼峰式写法

方法二:使用Antd的Row,Col绘制

注意:(详情参考https://blog.csdn.net/Run_youngman/article/details/88651365

 

选择器导出word:(详情参考:https://github.com/BetterZxx/mhtml-to-word

1、安装mhtml-to-word依赖

npm install mhtml-to-word

2、引入mhtml-to-word

import { exportWord } from 'mhtml-to-word'

3、使用

export=()=>{
        exportWord({
            filename: "exportTest",
            selector: ".export",
            style:''
        })
    }

 filename:导出word文件的文件名

selector:包裹导出内容的父级元素的类名className

style:自定义样式

4、效果

(以下style=""时效果很丑,需要自定义style)

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值