前端接收并下载文件流（blob对象）(word/.doc)

1 根据文件路径下载文件模板，前端拿到的是stream 文件流
2 将文件流下载下来

第一步当然是写请求方法了,如下

//下载模板
export function download (params) {return request({url:'/file/s3/file/xxxxxx.doc',//你懂的method:'get',responseType: 'blob',//重点 重点 重点 params})
}

//记得在axios相应拦截器中 返回相应的blob
// 判断是否为文件流if (response?.headers?.['content-type'] === 'application/octet-stream') {return response.data}

下一步当然是发送请求了

download().then((result) => {//type 的配置对于我 可有可无，写上为了记录下const blob = new Blob([result],{ type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8' })this.downloadFile('xxxxx.doc',blob);}).catch((err) => {console.log(err);});

因为使用的vue,所以有个全局配置

// 下载
Vue.prototype.downloadFile = (fileName, blob) => {if ('download' in document.createElement('a')) {// 非IE下载const eLink = document.createElement('a')eLink.download = fileNameeLink.style.display = 'none'eLink.href = URL.createObjectURL(blob)document.body.appendChild(eLink)eLink.click()// 释放URL 对象URL.revokeObjectURL(eLink.href)document.body.removeChild(eLink)} else {// IE10+下载navigator.msSaveBlob(blob, fileName)}
}

其他的可以参考如下博文

两个方案呢哦
可以看看的
三人行必有我师焉

前端接收并下载文件流（blob对象）(word/.doc)相关推荐

vue.js接收并下载文件流（blob对象）
在vue框架中,与传统的根据路径下载文件(document.getElementById("").src='')方式不同,有时候,我们会需要将上传的文件在后台直接进行处理再回传到前 ...
vue-axios下载文件流blob，ie下载报传递给系统调用的数据区域太小.ie文件流下载报错；文件下载失败将blob的错误信息转换成json格式
本次下载是后台文件流传输,前端下载,前端将拿到的下载id和名称downloadName传递给下载方法:如果是多个下载,可以采用数组for循环情景描述: 1.如果符合导出条件, 后端直接返回数据流,如 ...
【post请求下载文件流】如何使用post请求下载文件流 blob
最近有个需求,做文件的下载.其实下载没什么要特别说的,之前都是用的get请求,这次不同,后台用的post请求,返回的是数据流,这种post请求下载文件的方式倒是没怎么弄过.记录一下. 接口接口地址为 ...
js下载文件流，提示文件损坏问题
记录一下前端下载后端返回的文件流,提示文件损坏问题. const blob = new Blob([content.data], {// type是需要对应的文件类型type:"applic ...
vue 后台返回的文件流进行预览_vue实现下载文件流完整前后端代码
这篇文章主要为大家详细介绍了vue实现下载文件流完整前后端代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下使用Vue时,我们前端如何处理后端返回的文件流首先后端返 ...
js实现下载文件流图片
1.请求响应需要设置响应类型为流 responseType: 'blob', 2.下载文件流 // res 为后台返回的文件流 const reader = new FileReader();read ...
vue3下载文件流下载excel
//点击下载按钮qaGetDebitVoucher:async (id:any)=>{let res=await $axios.get($api.qaGetDebitVoucher+id,{ r ...
前端（vue）文件流下载
最近在做项目时,碰到一个需求,调接口,前端根据返回数流生成下载文件 . 1.首先进行封装在utils中,直接复制即可 export function dataToFile (params) {let ...
前端通过后端返回文件流下载文件
// 把文件流下载下来 const downloadMethods = (name, res) => {const blob = new Blob([res.data], { type: 'ap ...

前端接收并下载文件流（blob对象）(word/.doc)

其他的可以参考如下博文

前端接收并下载文件流（blob对象）(word/.doc)相关推荐

最新文章

热门文章

前端接收并下载文件流 （blob对象）(word/.doc)

其他的可以参考如下博文

前端接收并下载文件流 （blob对象）(word/.doc)相关推荐

最新文章

热门文章

前端接收并下载文件流（blob对象）(word/.doc)

前端接收并下载文件流（blob对象）(word/.doc)相关推荐