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

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