前端将后端返回的文件流转为excel并下载

也算是自己的一个总结吧

在遇到后端给前端返回的一个文件流的注意事项

首先自己封装了一个方法放在了utils里面

export function exportFile(data, type, fileName) {const blob = new Blob([data], {// type类型后端返回来的数据中会有，根据自己实际进行修改// 表格下载为 application/xlsx，压缩包为 application/zip等，type: type})const filename = fileNameif (typeof window.navigator.msSaveBlob !== 'undefined') {window.navigator.msSaveBlob(blob, filename)} else {var blobURL = window.URL.createObjectURL(blob)// 创建隐藏<a>标签进行下载var tempLink = document.createElement('a')tempLink.style.display = 'none'tempLink.href = blobURLtempLink.setAttribute('download', filename)if (typeof tempLink.download === 'undefined') {tempLink.setAttribute('target', '_blank')}document.body.appendChild(tempLink)tempLink.click()document.body.removeChild(tempLink)// 移除dom元素window.URL.revokeObjectURL(blobURL)// 释放bolb内存}
}

其次就是调用接口了

在调用接口我是有封装 axios

所以在写接口的时候要注意加上 responseType: 'blob'

export function Report(data) {return request({url: 'url',method: 'post',responseType: 'blob',data})
}

接下来就是在组件中去调用

     Report(this.data).then((res) => {const fileName = 'xxx报表'const contentType ='application/vnd.ms-excel'exportFile(res, contentType, fileName)}).catch((err) => {console.log(err)})

以上就是我的总结办法希望可以一起进步学习如果可以的话可以关注我一起学习

前端将后端返回的文件流转为excel并下载相关推荐

普通文件下载 + 前端获取后端返回的文件流并下载
参考资料前端接受后端文件流并下载的几种方法 ajax 请求二进制流图片文件 XMLHttpRequest 请求并处理二进制流数据之最佳实践 ajax请求二进制流进行处理(ajax异步下载文件) ...
后端返回PDF文件流，前端处理展示及打印
国庆突如其来的加班q.q,上午接到的需求,只能起床啦自己也是第一次接触这种业务需求,进行了一顿cv大法,网上有很多版本,个人学习借鉴(cv)了一下,在这里做个学习记录,欢迎各位指正优化,参考学习,如 ...
文件下载后端返回base64文件流，使用a标签下载
后端接口返回base64文件流 <a@click="downloadFiles(item.fileName, item.url)">{{ item.fileName } ...
微信小程序微信原生小程序如何通过后端返回的二进制流导出excel文件并保存和转发
因为工作上的原因有这个需求所以记录一下首先后端返回给我们的数据是这样的,一串二进制流然后直接上代码吧,注释基本上说的差不多了 wx.request({url: ``, //这个地方是你获取二进制流 ...
根据后端返回的文件流下载文件
//云附件文件流链接 function clouddownloadResources(id,title) {common.showLoading()api_enclosuredetail.cloud ...
接收后台返回的文件流或 base64 后下载打印 pdf 功能
后台正常返回的流 //dataResult.data是后台返回的流 let pdfUrl = window.URL.createObjectURL(new Blob([dataResult.data] ...
vue 后台返回的文件流进行预览_vue实现下载文件流完整前后端代码
这篇文章主要为大家详细介绍了vue实现下载文件流完整前后端代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下使用Vue时,我们前端如何处理后端返回的文件流首先后端返 ...
vue 后台返回的文件流进行预览_vue项目-pdf预览和下载，后台返回文件流形式
背景:正好最近碰到了这种需求,记录下来,方便以后查看. 后端返回的文件流数据如下图所示: 后台返回数据.png 一.pdf的预览一开始的时候百度了很多方法,有建议用pdfJs插件的,有iframe嵌 ...
vue项目，把图片文件流转为base64格式以图片形式展示在前端
问题描述前台需要展示图片,期望后台直接返回图片地址,但是后台给的是的文件流而不是一个图片地址,需要把文件流转为base64的格式展示出来. 请求后台接口时,返回图片内容如下: 上图不是base64格 ...

前端将后端返回的文件流转为excel并下载

前端将后端返回的文件流转为excel并下载相关推荐

最新文章

热门文章