js 文件下载

工程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

针对这几个知识点。单独提出来进行总结吧~