js 文件下载

工程WebApi:

点击按钮执行的handler

     exportClick() {
         var
             profile = {
                 content: this.state.profile,
                 type: MappingTypeForSevice.DomainMapping
             };
         if (this.props.viewType == ViewType.Edit)
             profile = this.assembleProfileDto();
         else
             profile.content.id = this.props.mappingId != '' ? this.props.mappingId : this.id;
         CommonFunction.exportClick(profile, this.state.mappingName);
     };

CommonFunction.exportClick定义

 export const exportClick = (profile, mappingName) => {
     MappingService.Downloadmapping(profile).then(
         result => {
             if (!result)
                 throw ("error");
             export_raw(mappingName, result)
         }
     ).catch(e => {
         $$.error(`error: ${e}`);
     });
 };

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

export_raw函数定义(XML形式)

 var
     export_raw = (name = '', data) => {
         let
             eleLink = document.createElement('a');
         data = new Blob([data], { type: "text/xml" });
         eleLink.style.display = 'none';
         eleLink.download = name + '.xml';
         if (window.navigator.msSaveOrOpenBlob) {
             var
                 xml = name + '.xml';
             navigator.msSaveOrOpenBlob(data, xml);
         } else {
             //let
             //    dataUrl = "data:;base64," + data;
             //eleLink.href = dataUrl;
             eleLink.href = URL.createObjectURL(data);
             document.body.appendChild(eleLink);
             eleLink.click();
             document.body.removeChild(eleLink);
         };
     };

EXCEL文件返回

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

export_raw函数定义(EXCEL形式)

 export_raw(name = '', data) {
     let
         eleLink = document.createElement('a');
     eleLink.style.display = 'none';
     eleLink.download = name + '.xls';
     data = "data:;base64," + data;
     if (window.navigator.msSaveOrOpenBlob) {
         // if browser is IE
         let blob = this.dataURLtoBlob(data);
         navigator.msSaveOrOpenBlob(blob, name + '.xls');
     } else {
         eleLink.href = data;
         document.body.appendChild(eleLink);
         eleLink.click();
         document.body.removeChild(eleLink);
     };
 };

     dataURLtoBlob = (dataurl) => {
         var
             arr = dataurl.split(','),
             mime = arr[0].match(/:(.*?);/)[1],
             bstr = atob(arr[1]), n = bstr.length,
             u8arr = new Uint8Array(n);
         while (n--) {
             u8arr[n] = bstr.charCodeAt(n);
         }
         return new Blob([u8arr], { type: mime });
     };

这里涉及到了data url跟URL.createObjectURL两种方式创建下载链接。

工程：.NetCore

controller：

       [HttpPost("export")]
         public async Task<IActionResult> ExportTimeslot([FromBody] ExportTimeslotsCommand command)
         {
             command.SheetName = TimeslotExportSheetName;
             var result = await _mediator.Send(command);
             var fileStream = System.IO.File.ReadAllBytes(result);
             return Request.OK(fileStream); //文件流
             //return File(fileStream, "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", result.ToString() + ".xlsx");//文件
         }

js:

  handleExportButtonClick() {
         var
             self = this,
             data = {};
         data['sheetName'] = "";
         data['assessments'] = this.assessments;
         data['CohortNames'] = this.cohorts;
         data['moduleCodes'] = this.moduleCodes;
         data['qTypes'] = this.qTypes;
         data['status'] = this.status;
         $.ajax({
             url: `${CommonUtil.getTargetUrlPrefix(SAComponents.COMPONENT_ASSESSMENTPRINTINGTRACKING)}/api/test/export`,
             data: JSON.stringify(data),
             method: 'POST',
             processData: false,
             contentType: 'application/json',
             cache: false,
             dataType: "text",
             targetComponent: SAComponents.COMPONENT_ASSESSMENTPRINTINGTRACKING,
             success: function (res) {
                 self.handleExportButtonClickCallBack('test', res);
                 console.log('success');
             },
             error: function (e) {
                 console.log(e);
             },
             headers: {
                 Authorization: "Bearer " + userProfileManager.getAccessToken()
             },
         });
     };

以文件形式反回，可以利用base64进行下载，当然在浏览器里也可以看到excel文件：

base64:

 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

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