阅读 731

前端自主导出excel、通过js调用后端接口下载表格文件(GET和POST方法)

一. 如果后端不做或不支持导出报表

(1)基于better-xlsx和file-saver插件的再一次封装
  1. 引入插件:npm install sw_react_plug --save-dev; npm install;(前提是已经引入了better-xlsx和file-saver包,如果没有,就需要再执行npm install --save-dev better-xlsx file-saver安装better-xlsx和file-saver)。
  2. 页面引入插件: import { ExportExcel } from 'sw_react_plug
  3. 引用:<ExportExcel fileName=xxx数据报表 column={columns} dataSource={data} />;其中column是表格列的配置描述,dataSource是数据数组,(对应ant design里table的columns和dataSource)。

特别提醒: 这样直接引用会render一次就会加载从而下载,所以需要我们通过条件判断进而加载。eg: 1. 初始化int:status为0; 2. 点击事件:status++; 3. 使用: {status!== 0 && <ExportExcel {...rxportExcelProps} />};(可直接status && xxx,使用的是隐式转换。)

(2)ReactHTMLTableToExcel插件
  1. 引入插件:npm install react-html-table-to-excel --save-dev; npm install;
  2. 页面引入插件:import ReactHTMLTableToExcel from 'react-html-table-to-excel
  3. 引用:<ReactHTMLTableToExcel className="download-table-xls-button" table="table-to-xls" filename="file_name" sheet="sheet_name" buttonText="导出报表"/>;<table ... id="table-to-xls">xxx</table>;
特别提醒:
    在使用ui库之后,可能会有一些变化,比如antd里面以hooks为例需要这样做:
        import ReactDOM from 'react-dom';
        const tableEl = useRef(null);
        useEffect(() => {
        const tableCon = ReactDOM.findDOMNode(tableEl.current);
        const table = tableCon.querySelector('table');  //获取table
        table.setAttribute('id',`table-to-xls`);     //给该table设置属性
    },[]);
    
    <Table ref='table_El'  />;
    注: 如果还是赋值不上,在Table外层包裹一层div,给div赋值ref。
复制代码

二. 调用后端接口

(1)GET请求
  1. window.location.href = '/api/xxx/xxx'
  2. window.open('/api/xxx/xxx?params')
  3. <a href={`/api/xxx/xxx?params`} download="报表.xlsx">导 出</a>
(2)POST请求

直接调用接口是返回这样的表格流文件格式:

打印返回是这样的:

我们需要这样操作:使用Blob 对象指定要读取的文件或数据, 下面以axios请求为例

axios.post('/apis/api/refund/getRefundFile', {...payload}, {
      responseType: 'blob'
    }).then(res => {
      const BLOB = res.data; // Blob 对象表示一个不可变、原始数据的类文件对象(File 接口都是基于Blob)
      const fileReader = new FileReader(); // FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件的内容
      fileReader.readAsDataURL(BLOB); // 开始读取指定的Blob中的内容。一旦完成,result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容
      fileReader.onload = (event) => { // 处理load事件。该事件在读取操作完成时触发
        // 新建个下载的a标签,完成后移除。
        let a = document.createElement('a');
        a.download = `数据报表.xlsx`;
        a.href = event.target.result; 
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      }
    }).catch(err => {
      console.log(err.message)
    });
复制代码
(3)还可以这样操作:
const clickHandle = src => {
    var iframe = document.createElement('iframe');
    iframe.src = src ;
    iframe.style.display = 'none';
    document.body.appendChild(iframe);
}
复制代码
关注下面的标签,发现更多相似文章
评论