摘要：
结果）5throw；6export_ raw7}8）.捕获；11}; 后台返回的结果是字符串，xml是内容导出_ Raw函数定义1var2export_ Raw=˃{3let4eleLink=document.createElement（'a'）；5data=newBlob；6eleLink.style.display='none'；7eleLink.download=name+'.xml'；8if{9var10xml=name+'.xml'；11navigator.msSaveOrOpenBlob；12}其他{13//let14//dataUrl=“data:；base64，”+数据；15//eleLink.href=dataUrl；16eleLink.href=URL.createObjectURL；17document.body.appendChild；18eleLink.click（）；19文档.body.removeChild；20}; 21}; EXCEL文件返回haha，这意味着EXCEL文件是特殊的~export_ Raw函数定义1export_ Raw｛2let3eleLink=document.createElement（'a'）；4eleLink.style.display='none'；5eleLink.download=name+'.xls'；6data=“data:；base64，”+data；7if｛8//ifbrowsersIE9letblob=this.dataURLtoBlob；10navigator.msSaveOrOpenBlob；11｝其他｛12eleLink.href=data；13document.body.appendChild；14eleLink.click（）；15document.body.removeChild；16｝; 17}; 1dataURLtoBlob==˃{2var3arr=dataurl.split（'，'），4mime=arr[0]匹配（/：（.*？
工程WebApi:
点击按钮执行的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 };
这里涉及到了data url跟URL.createObjectURL两种方式创建下载链接。
工程：.NetCore
controller：
1 [HttpPost("export")] 2 public async Task<IActionResult> ExportTimeslot([FromBody] ExportTimeslotsCommand command) 3 { 4 command.SheetName = TimeslotExportSheetName; 5 var result = await _mediator.Send(command); 6 var fileStream = System.IO.File.ReadAllBytes(result); 7 return Request.OK(fileStream); //文件流 8 //return File(fileStream, "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", result.ToString() + ".xlsx");//文件 9 }
js:
1 handleExportButtonClick() { 2 var 3 self = this, 4 data = {}; 5 data['sheetName'] = ""; 6 data['assessments'] = this.assessments; 7 data['CohortNames'] = this.cohorts; 8 data['moduleCodes'] = this.moduleCodes; 9 data['qTypes'] = this.qTypes; 10 data['status'] = this.status; 11 $.ajax({ 12 url: `${CommonUtil.getTargetUrlPrefix(SAComponents.COMPONENT_ASSESSMENTPRINTINGTRACKING)}/api/test/export`, 13 data: JSON.stringify(data), 14 method: 'POST', 15 processData: false, 16 contentType: 'application/json', 17 cache: false, 18 dataType: "text", 19 targetComponent: SAComponents.COMPONENT_ASSESSMENTPRINTINGTRACKING, 20 success: function (res) { 21 self.handleExportButtonClickCallBack('test', res); 22 console.log('success'); 23 }, 24 error: function (e) { 25 console.log(e); 26 }, 27 headers: { 28 Authorization: "Bearer " + userProfileManager.getAccessToken() 29 }, 30 }); 31 };
以文件形式反回，可以利用base64进行下载，当然在浏览器里也可以看到excel文件：
base64:
1 data:;base64,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
这种方式适用不能通过get请求时需要post请求时发送复杂的参数。get请求场景可以将controller直接反回文件，前台利用window.open()进行下载。
Data Url
这里用的是base64，base64是一种标准的算法，在JavaScript中可以将任何变量的值转化成base64的形式(这里excel文件返回的就是base64形式)，这里用data url形式进行地址复制。
URL.createObjectURL()
创建url用的，接受参数blob或者file
针对这几个知识点。单独提出来进行总结吧~