react项目导出数据doc格式及其他格式方法

1.场景

如下图所示，项目要求对页面中的数据下载到本地，并以某种类型展示，如Word、doc、html等。在这个项目中要求下载为doc文件和HTML文件，其实下载功能还是很简单的，关键的地方就是下载后的格式问题，比如doc其实就是表格或者文档的格式。

2.思路

我的思路是这样的，我会根据需求将需要导出的数据，在项目中找个地方以table、th表格标签的形式写，然后设置display：none,目的是不让多出来的结构影响到原本的页面，然后绑定ref,然后再通过模板字符串的形式，渲染出来。下面我是代码实例。

3.实现

第一步，准备数据，隐藏标签，绑定ref


             // 1.准备数据，要下载的数据，以表格的形式书写。
               
                     <table style={{display: "none"}} className='table11_7 resultTable'>
                          <tr>
                              <th>序号th>
                              <th>名称th>
                              <th>是否存在漏洞th>
                              {/* <th>开放情况th> */}
                          tr>
                          {list.map((ele, idx) => (
                              <tr className='tr'>
                                  <td className='td td1'>{idx + 1}td>
                                  <td className='td td2'>{ele.data.Id}td>
                                  <td className='td td3'>{ele.data.status} td>
                                  {/* <td className='td td4'> td> */}
                              tr>
                          ))}
                     table>

第二步，通过模板字符串生成数据

需要注意的是，如果不以table标签书写，下载后的doc文件很乱，html则没事，所以还是尽量用table标签去写。

代码中的最后几行是下载功能，个人感觉是挺万金油的，可以根据需要下载为任意类型的文件

以下代码实例为，点击按钮下载。


 <Button
                        onClick={(e) => {
         
                            let resHtml = `
                             
                             
                             
                                 
                                 
                                 
                                 Document
                                 
                             
                             
                                
                                  
                                     ${listRef.current.innerHTML}

${listRef3.current.innerHTML}