码迷,mamicode.com
首页 > Web开发 > 详细

js 文件下载

时间:2018-05-10 14:24:17      阅读:500      评论:0      收藏:0      [点我收藏+]

标签:end   port   技术   --   ping   create   open   ops   let   

点击按钮执行的handler

 1     exportClick() {
 2         var
 3             profile = {
 4                 content: this.state.profile,
 5                 type: MappingTypeForSevice.DomainMapping
 6             };
 7         if (this.props.viewType == ViewType.Edit)
 8             profile = this.assembleProfileDto();
 9         else
10             profile.content.id = this.props.mappingId != ‘‘ ? this.props.mappingId : this.id;
11         CommonFunction.exportClick(profile, this.state.mappingName);
12     };

CommonFunction.exportClick定义

 1 export const exportClick = (profile, mappingName) => {
 2     MappingService.Downloadmapping(profile).then(
 3         result => {
 4             if (!result)
 5                 throw ("error");
 6             export_raw(mappingName, result)
 7         }
 8     ).catch(e => {
 9         $$.error(`error: ${e}`);
10     });
11 };

后台返回result是一个字符串,xml为内容

技术分享图片

export_raw函数定义(XML形式)

 1 var
 2     export_raw = (name = ‘‘, data) => {
 3         let
 4             eleLink = document.createElement(‘a‘);
 5         data = new Blob([data], { type: "text/xml" });
 6         eleLink.style.display = ‘none‘;
 7         eleLink.download = name + ‘.xml‘;
 8         if (window.navigator.msSaveOrOpenBlob) {
 9             var
10                 xml = name + ‘.xml‘;
11             navigator.msSaveOrOpenBlob(data, xml);
12         } else {
13             //let
14             //    dataUrl = "data:;base64," + data;
15             //eleLink.href = dataUrl;
16             eleLink.href = URL.createObjectURL(data);
17             document.body.appendChild(eleLink);
18             eleLink.click();
19             document.body.removeChild(eleLink);
20         };
21     };

EXCEL文件返回

技术分享图片

哈哈,意思意思得了,EXCEL文件比较特殊~

export_raw函数定义(EXCEL形式)

 1 export_raw(name = ‘‘, data) {
 2     let
 3         eleLink = document.createElement(‘a‘);
 4     eleLink.style.display = ‘none‘;
 5     eleLink.download = name + ‘.xls‘;
 6     data = "data:;base64," + data;
 7     if (window.navigator.msSaveOrOpenBlob) {
 8         // if browser is IE 
 9         let blob = this.dataURLtoBlob(data);
10         navigator.msSaveOrOpenBlob(blob, name + ‘.xls‘);
11     } else {
12         eleLink.href = data;
13         document.body.appendChild(eleLink);
14         eleLink.click();
15         document.body.removeChild(eleLink);
16     };
17 };
 1     dataURLtoBlob = (dataurl) => {
 2         var
 3             arr = dataurl.split(‘,‘),
 4             mime = arr[0].match(/:(.*?);/)[1],
 5             bstr = atob(arr[1]), n = bstr.length,
 6             u8arr = new Uint8Array(n);
 7         while (n--) {
 8             u8arr[n] = bstr.charCodeAt(n);
 9         }
10         return new Blob([u8arr], { type: mime });
11     };

 

js 文件下载

标签:end   port   技术   --   ping   create   open   ops   let   

原文地址:https://www.cnblogs.com/moran1992/p/9019193.html

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