前端实现流文件下载、导出功能解决方案

这篇具有很好参考价值的文章主要介绍了前端实现流文件下载、导出功能解决方案。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、自定义下载文件名称

1、封装下载方法(可以通过挂载在vue实例上成为全局函数)

import requset from 'axios'
// 经过请求拦截器、响应拦截器处理
onloadFileName(url,method,params,fileName){
	request({
		url:url,
		method:method,
		// get 方法传参为例
		data:{
		...params
		},
		// 添加响应数据类型
		responseType: 'blob',
		// 添加文件下载特定请求头
	    headers: {
	       'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
	     },
	}).then(res =>{
		// res 为响应拦截器返回的内容,大家可以对比自己的响应拦截器修改下面方法的判断
		if (!data) {
	     this.$message.warning("文件下载失败");
	      return;
	    }
	    // web Api种操作流文件的方法
	     if (typeof window.navigator.msSaveBlob !== "undefined") {
	     // msSaveBlob:只提供一个保存按钮
	     // window.navigator.msSaveBlob(new Blob([data]),`${fileName}.txt`);
	     
	     // msSaveOrOpenBlob:提供保存和打开按钮	
	     //window.navigator.msSaveOrOpenBlob(newBlob([data]),`${fileName}.txt`);
		     window.navigator.msSaveBlob(
		        new Blob([data]),
		        filename + ".xls"
		      );
	    } else {
	    // 自定义实现流文件下载
		      let url = window.URL.createObjectURL(new Blob([data]));
		      let link = document.createElement("a");
		      link.style.display = "none";
		      link.href = url;
		      link.setAttribute("download", fileName + ".xls");
		      document.body.appendChild(link);
		      link.click();
		      document.body.removeChild(link); //下载完成移除元素
		      window.URL.revokeObjectURL(url); //释放掉blob对象
	    }
	})
}

前端下载文件流,javaScript,前端,javascript,vue.js
2、调用下载方法

this.onloadFileName('xxx/xxx/xx','get',{id:'xxxxxxx'},'文件一')

二、文件名称从后端响应头数据中获取

前端下载文件流,javaScript,前端,javascript,vue.js
·1、处理响应拦截器返回的数据,将文件名暴露暴露出去

// 设置请求接受拦截器 响应拦截器中兼容处理流数据
serves.interceptors.response.use(response => {
	  // 设置接受数据之后,做什么处理
    const res = response.data
     if (!res.code && res.code === 200) {
     // 数据是流
        if(response.headers['content-disposition']){
            return {
                blobData:res,
                contentDisposition:response.headers['content-disposition']
            }
        }
        // 正常情况下
        else{
            return res
        }
       
    }
})

前端下载文件流,javaScript,前端,javascript,vue.js
2、封装下载方法

onloadFileName(url,method,params){
	request({
		url:url,
		method:method,
		// get 方法传参为例
		data:{
		...params
		},
		// 添加响应数据类型
		responseType: 'blob',
		// 添加文件下载特定请求头
	    headers: {
	       'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
	     },
	}).then(res =>{
		 if (!res.blobData) {
            this.$message.warning("文件下载失败");
              return;
          }
          // web Api种操作流文件的方法
	     if (typeof window.navigator.msSaveBlob !== "undefined") {
		     // msSaveBlob:只提供一个保存按钮
		     // window.navigator.msSaveBlob(new Blob([data]),`${fileName}.txt`);
		     
		     // msSaveOrOpenBlob:提供保存和打开按钮	
		     //window.navigator.msSaveOrOpenBlob(newBlob([data]),`${fileName}.txt`);
             window.navigator.msSaveBlob(
                  new Blob([res.blobData]),
                  res.contentDisposition+ ".xls"
              );
           	} else {
               let url = window.URL.createObjectURL(new Blob([res.blobData],
                   { 
                    type:
                        ".xlsx"
                   } 
                ));
                let link = document.createElement("a");
                link.style.display = "none";
                link.href = url;
                // decodeURIComponent()解码文件名称
                // data.contentDisposition.split('=')[1] 分割文件名称
                const fileName = decodeURIComponent(data.contentDisposition.split('=')[1])
                link.setAttribute("download",fileName);
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link); //下载完成移除元素
                window.URL.revokeObjectURL(url); //释放掉blob对象
          }
}

3、调用下载方法

this.onloadFileName('xxx/xxx/xx','get',{id:'xxxxxxx'})

问题一:后端返回的数据无法解析
在请求函数中添加响应类型以及响应头
前端下载文件流,javaScript,前端,javascript,vue.js
问题二、后端返回的文件名经过相应拦截器后无法暴露出来导致无法获取文件名报错。
后端返回二进制流数据时设置请求头,添加可暴露出的字段文章来源地址https://www.toymoban.com/news/detail-856032.html

 response.setHeader("Access-Control-Expose-Headers", "Content-Disposition")
 response.setHeader("Content-Disposition", ...)

到了这里,关于前端实现流文件下载、导出功能解决方案的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包