在react项目中，导出word文档做内容表格

需求：在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>
    )

实现结果：