netcore5 jquery与vue axios 下载文件

8 篇文章 0 订阅
5 篇文章 0 订阅

后端

[HttpGet("Home/Excel")]
public IActionResult Excel()
{

    string path = @"E:\Projects\Demos\WebApplication1\testmerge.xlsx";
    var provider = new Microsoft.AspNetCore.StaticFiles.FileExtensionContentTypeProvider();
    var fileInfo = new System.IO.FileInfo(path);
    var contentType = provider.Mappings[fileInfo.Extension];            
    var ms = System.IO.File.OpenRead(path);
    return File(ms, contentType, fileInfo.Name);
}

jquery

$.ajax({
            type: "get",
            xhrFields: {
                responseType: 'blob'
            },
            url: "/Home/Excel",
            beforeSend: function (XHR) {
                XHR.setRequestHeader('Authorization', 'Bearer 可以传token');
            }, success: function (data, successTextStatus, xhr) {                      
                var url = window.URL || window.webkitURL;
                let data_url = url.createObjectURL(data);
                let link = document.createElement('a');
                link.style.display = 'none';
                link.href = data_url;
                let min = 10000, max = 99999;//生成5位随机数
                var name=Math.floor(Math.random() * (max - min + 1) + min);
                let fileName = name+ ".xlsx";
                const contentDisposition = xhr.getResponseHeader('content-disposition');
                if (contentDisposition) {
                    fileName = window.decodeURI(contentDisposition.split('=')[2]);
                    fileName = fileName.substr(7);
                }
                link.setAttribute('download', fileName);
                document.body.appendChild(link)
                link.click();
                document.body.removeChild(link)
            }
        });

axios

 axios({
        url: '/Home/Excel',
        method:'get',
        responseType: 'blob',
        headers: {
            "Authorization": "Bearer " + getToken() //没有token删除此处headers
        },
    }).then(res=>{
        let data_url = URL.createObjectURL(res.data);
        let link = document.createElement('a');
        link.style.display = 'none';
        link.href = data_url;
        let min = 10000, max = 99999;//生成5位随机数
        var name = parseInt(Math.random() * (max - min + 1) + min, 10);
        let fileName = name + ".xlsx";
        const contentDisposition = res.headers['content-disposition'];
        if (contentDisposition) {
            fileName = window.decodeURI(contentDisposition.split('=')[2]);
            fileName = fileName.substr(7);
        }
        link.setAttribute('download', fileName);
        document.body.appendChild(link)
        link.click();
        document.body.removeChild(link)
    }).catch(err=>{
    });

到这里还未完,有一部分人获取不到后端传的文件名,原因是获取不到content-disposition

前后端分离跨域是获取不到的

在Startup.cs跨域里设置下

这样写是可以的

.WithExposedHeaders("content-disposition"); 

加微信获取源码:25489181

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

神色自若

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值