码迷,mamicode.com
首页 > 其他好文 > 详细

前端如何导出excel csv文件

时间:2020-01-03 12:34:50      阅读:90      评论:0      收藏:0      [点我收藏+]

标签:des   from   child   本地   post   charset   tee   通知   navigator   

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

使用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);

});

前端如何导出excel csv文件

标签:des   from   child   本地   post   charset   tee   通知   navigator   

原文地址:https://www.cnblogs.com/dianfeng1/p/12144077.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!