Vue axios 下载文件

2021-01-14 乐帮网

vuejs

本文写一个导出Excel的示例，后台是通过C#提供的Web API实现的，前端代码：

 this.$axios
        .post(
          "api/exportexcel",
          {
          factoryName: this.factoryName,
          productModel: this.produceDate,
          plateType: this.plateType,
          checkBeginTime: this.checkDate.begintime,
          checkEndTime: this.checkDate.endtime
          },
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            },
            responseType: "arraybuffer"
          }
        )
        .then(
          function(res) {
            var blob = new Blob([res.data], {
              type: "application/vnd.ms-excel"
            }); 
             
            if (window.navigator && window.navigator.msSaveOrOpenBlob) {
              window.navigator.msSaveOrOpenBlob(blob, "下载的文件.xls");
              return;
            } else {
              var downloadElement = document.createElement("a");
              var href = window.URL.createObjectURL(blob); 
              downloadElement.href = href;
              downloadElement.download = "下载的文件.xls"; 
              document.body.appendChild(downloadElement);
              downloadElement.click(); 
              document.body.removeChild(downloadElement); 
              window.URL.revokeObjectURL(href); 
            }
          }
        ) 
        .catch(
          function(err) {
            if (err.response) {
              this.$message({
                message: "服务器端错误，导出失败！",
                type: "error"
              });
            }
          }.bind(this)
        );

后端代码C# 写的WebAPI如下：

[HttpPost]
        public HttpResponseMessage ExportFile()
        {
	string filePath =@"D:\demo.xls";
var stream = new MemoryStream(File.ReadAllBytes(filePath));
            var resp = new HttpResponseMessage(HttpStatusCode.OK)
            {
                Content =  new StreamContent(stream)
        };

            resp.Content.Headers.ContentType = new MediaTypeHeaderValue("application/vnd.ms-excel");

            resp.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
            {
                FileName = HttpUtility.UrlEncode(fileName, Encoding.UTF8),
                DispositionType = "UTF-8"
            };
         
            return resp;
}

以上就是一个完整的示例代码。

相关文章：vue脚手架通过axios下载文件格式错误且乱码

关注我的微信公众号
在公众号里留言交流
投稿邮箱：1052839972@qq.com

庭院深深深几许？杨柳堆烟，帘幕无重数。
玉勒雕鞍游冶处，楼高不见章台路。
雨横风狂三月暮。门掩黄昏，无计留春住。
泪眼问花花不语，乱红飞过秋千去。

如果感觉对您有帮助
欢迎向作者提供捐赠
这将是创作的最大动力