vue 下载文件 前后端代码

实现功能：下载Excel，Word等文件，以Excel表格举例

图片.png

后端代码：

图片.png

 [HttpGet("byte")] 
        //public async Task Export(long startTime, long endTime)  //Task  Task 
        public async Task Export(long startTime, long endTime)  //Task  Task 
        {
            //这一步是我从库里读取的数据，参数是开始时间和结束时间，仅作为参考
            List resultList = new List();
            resultList = _hlwApplicationAppService.getDJFXXPerTime(startTime, endTime);

            List ress = new List();
            //进行赋值
            foreach (var jfxx in resultList)
            {
                PaymentInformation1 res = new PaymentInformation1();
                res.YWH = jfxx.YWH;
                res.ORDERID = jfxx.ORDERID;
                //res.PAYMENTTIME = jfxx.PAYMENTTIME;
                res.PAYMENTTIME = StampToDateTime(jfxx.PAYMENTTIME);
                res.YWLXMC = jfxx.YWLXMC;
                res.YSJE = jfxx.YSJE;
                res.XMBMMC = jfxx.XMBMMC;
                res.JFDWMC = jfxx.JFDWMC;
                ress.Add(res);
            }

            IExporter exporter = new ExcelExporter();
            var bytes = await exporter.ExportAsByteArray(ress);
            //return bytes;

            var name = "支付记录查询";
            return File(bytes, "application/octet-stream", $"{name}_{DateTime.Now:yyyyMMddHHmmss}.xlsx");
        }


[ExcelExporter(Name = "缴费信息", AutoFitAllColumn = true)]
    public class PaymentInformation1
    {
        /// 

        ///     姓名
        /// 
        [ExporterHeader(DisplayName = "业务号")]
        public string YWH { get; set; }
        [ExporterHeader(DisplayName = "订单号")]
        public string ORDERID { get; set; }
        [ExporterHeader(DisplayName = "缴费时间")]
        public string PAYMENTTIME { get; set; }
        [ExporterHeader(DisplayName = "业务类型")]
        public string YWLXMC { get; set; }
        [ExporterHeader(DisplayName = "金额")]
        public string YSJE { get; set; }
        [ExporterHeader(DisplayName = "项目名称")]
        public string XMBMMC { get; set; }
        [ExporterHeader(DisplayName = "缴费单位名称")]
        public string JFDWMC { get; set; }
    }

前端代码：

1 加个相应拦截器

// 路由响应拦截
_axios.interceptors.response.use(
    (response) => {
        if (response.data.code == 1000) {
            return response
        } else if (response.config.responseType === 'blob') {
            console.log(response.headers);
            const fileName = decodeURI(
              response.headers['content-disposition'].split('filename*=UTF-8\'\'')[1]
            )
            return Promise.resolve({
              data: response.data,
              fileName: fileName
            })
          } else {
            return response
        }
    },
    (error) => {
        //响应错误
        return Promise.reject(error)
    }
);

2 访问接口

 导出Excel表格


 exportTable() {
                this.axios.get("/applyServer/Export/byte", {
                        params: {
                            startTime: 0,
                            endTime: 0,
                        },
                        responseType: 'blob'
                    }).then(res => {
                        console.log(res);
                        let blob = new Blob([res.data], {
                            type: res.data.type
                        });
                        // 针对于 IE 浏览器的处理, 因部分 IE 浏览器不支持 createObjectURL
                        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                            window.navigator.msSaveOrOpenBlob(blob, res.fileName);
                        } else {
                            var downloadElement = document.createElement("a");
                            var href = window.URL.createObjectURL(blob); // 创建下载的链接
                            downloadElement.href = href;
                            downloadElement.download = res.fileName; // 下载后文件名
                            document.body.appendChild(downloadElement);
                            downloadElement.click(); // 点击下载
                            document.body.removeChild(downloadElement); // 下载完成移除元素
                            window.URL.revokeObjectURL(href); // 释放掉 blob 对象
                        }
                    })
                    .catch(err => {
                        this.$message.error('系统错误');
                    });
            }