前端如何导出excel csv文件

------------恢复内容开始------------

使用fetch方式导出文件, 用antdesign react UI设计

1. import fetch from 'isomorphic-fetch';

import {message} from 'antd';

2. 本地测试时和测试环境url的配置

let url = process.env.NODE_ENV==='development' ? 'localhost' : window.location.origin;

3.

fetch(`${url}/rwscxm/api/v1/casemgmt/report/export/incident/csv`, {

      method: 'post',

      body: JSON.stringify(body), 

      headers: new Headers({

           'Content-Type': 'application/json;charset=utf-8',

           token : ''

      })

}).then(response => {

       response.blob().then(blob => {

              if (response.status !== 200) {

                       // 自定义打印消息,我们使用antdesign的组件进行消息通知

                       message.warn('File download error status: ' + response.status);

              }

              let fileName = 'incident_report_summary_'+new Date().toLocaleDateString()+'.csv';

              if (window.navigator.msSaveOrOpenBloc) {

                      navigator.msSaveBlod(blob, fileName);

              } else {

                      const blobUrl = window.URL.createObjectURL(blob);

                      const aElement = document.createElement('a');

                      document.body.appendChild(aElement);

                      aElement.style.display = 'none';

                      aElement.href = blobUrl;

                      aElement.download = fileName;

                      aElement.click();

                      document.body.removeChild(aElement);

              }

      })

}).catch(error => {

        console.log(error);

});

------------恢复内容结束------------

使用fetch方式导出文件, 用antdesign react UI设计

1. import fetch from 'isomorphic-fetch';

import {message} from 'antd';

2. 本地测试时和测试环境url的配置

let url = process.env.NODE_ENV==='development' ? 'localhost' : window.location.origin;

3.

fetch(`${url}/rwscxm/api/v1/casemgmt/report/export/incident/csv`, {

      method: 'post',

      body: JSON.stringify(body), 

      headers: new Headers({

           'Content-Type': 'application/json;charset=utf-8',

           token : ''

      })

}).then(response => {

       response.blob().then(blob => {

              if (response.status !== 200) {

                       // 自定义打印消息,我们使用antdesign的组件进行消息通知

                       message.warn('File download error status: ' + response.status);

              }

              let fileName = 'incident_report_summary_'+new Date().toLocaleDateString()+'.csv';

              if (window.navigator.msSaveOrOpenBloc) {

                      navigator.msSaveBlod(blob, fileName);

              } else {

                      const blobUrl = window.URL.createObjectURL(blob);

                      const aElement = document.createElement('a');

                      document.body.appendChild(aElement);

                      aElement.style.display = 'none';

                      aElement.href = blobUrl;

                      aElement.download = fileName;

                      aElement.click();

                      document.body.removeChild(aElement);

              }

      })

}).catch(error => {

        console.log(error);

});

猜你喜欢

转载自www.cnblogs.com/dianfeng1/p/12144077.html