需求:在react项目中,导出word文档,但文档内容是接口提供数据,做成表格。不是直接导出excel表。
示例:
解决方案:
1. 使用html-docx-js插件
npm install html-docx-js
中途出现html-docx-js安装失败报错问题
解决html-docx-js安装失败报错问题,排查是淘宝镜像问题导致一直安装不上,更换镜像
2.安装 file-saver导出插件
npm install file-saver --save
3.页面代码
// 模拟数据
const [tableData, setTableData] = useState([
{
name: '测试',
sex: '女',
harmful: '噪声、铁粉尘',
workAge: '6',
type: '岗中',
list: [
{
"id": 1,
"conclusionName": "白细胞计数降低",
"suggestion": '一、本次健康检查未发现电工作业职业禁忌证。<br/> 二、其他疾病或检查异常<br/>',
},
{
"id": 2,
"conclusionName": "平均血小板体积降低",
"suggestion": "建议结合临床进行综合评估,血液科咨询诊治。",
},
{
"id": 3,
"conclusionName": "血小板压积增高",
"suggestion": "建议结合临床进行综合评估,血液科咨询诊治。",
}
]
},
{
name: '李现',
sex: '男',
harmful: '噪声',
workAge: '5',
type: '岗中',
list: [
{
"id": 1,
"conclusionName": "白细胞计数降低",
"suggestion": "建议复查并结合其它血液常规指标及临床进行综合评估。",
},
{
"id": 2,
"conclusionName": "平均血小板体积降低",
"suggestion": "建议结合临床进行综合评估,血液科咨询诊治。",
},
{
"id": 3,
"conclusionName": "血小板压积增高",
"suggestion": "建议结合临床进行综合评估,血液科咨询诊治。",
}
]
},
{
name: '哈哈',
sex: '女',
harmful: '铁粉尘',
workAge: '4',
type: '岗中',
list: [
{
"id": 1,
"conclusionName": "白细胞计数降低",
"suggestion": "建议复查并结合其它血液常规指标及临床进行综合评估。",
},
{
"id": 2,
"conclusionName": "平均血小板体积降低",
"suggestion": "建议结合临床进行综合评估,血液科咨询诊治。",
},
{
"id": 3,
"conclusionName": "血小板压积增高",
"suggestion": "建议结合临床进行综合评估,血液科咨询诊治。",
}
]
},
]);
// 导出表格的页面
const exportToWord = () => {
const tableHtml = (
<table style={{
width: '100%',
border: '1px solid #000',
borderCollapse: 'collapse',
textAlign: 'center',
}}>
<thead>
<tr>
<th
style={{
width: '5%',
border: '1px solid #000',
}}
>编号</th>
<th
style={{
width: '10%',
border: '1px solid #000',
}}
>姓名</th>
<th
style={{
width: '5%',
border: '1px solid #000',
}}
>性别</th>
<th
style={{
width: '18%',
border: '1px solid #000',
}}
>接触的有害因素</th>
<th
style={{
width: '10%',
border: '1px solid #000',
}}
>接害工龄</th>
<th
style={{
width: '10%',
border: '1px solid #000',
}}
>类别</th>
<th
style={{
border: '1px solid #000',
}}
>检查结果和处理意见</th>
</tr>
</thead>
<tbody>
{ tableData.map((row, index) => (
<tr key={index}>
<td
style={{
width: '5%',
border: '1px solid #000',
}}
>{index+1}</td>
<td
style={{
width: '10%',
border: '1px solid #000',
}}
>{row.name}</td>
<td
style={{
width: '5%',
border: '1px solid #000',
}}
>{row.sex}</td>
<td
style={{
width: '18%',
border: '1px solid #000',
}}
>{row.harmful}</td>
<td
style={{
width: '10%',
border: '1px solid #000',
}}
>{row.workAge}年</td>
<td
style={{
width: '10%',
border: '1px solid #000',
}}
>{row.type}</td>
<td
style={{
border: '1px solid #000',
}}
>
<div>
{
row.list.map((i, idx) => (
<div>
<p style={{
textAlign: 'left',
padding: 0,
marginBottom: '6px',
margin: 0,
}}>{idx+1}.{i.conclusionName}:</p>
<p style={{
padding: 0,
margin: 0,
marginBottom: '6px',
textAlign: 'left',
textIndent: '2em',
}}
dangerouslySetInnerHTML={{ __html: i.suggestion }}
></p>
</div>
))
}
</div>
</td>
</tr>
))
}
</tbody>
</table>
);
let htmlContent = ReactDOMServer.renderToString(tableHtml);
console.log(123123, htmlContent)
const content = htmlDocx.asBlob(htmlContent);
saveAs(content, 'table.docx');
};
return (
<div>
<button onClick={exportToWord}>导出</button>
</div>
)
实现结果: