vue 执行下载文件 后端直接返回文件流怎么下载 ?
可以使用 Blob() 进行转换 const blob = new Blob([res], { type: 'application/msword' });
但是在成功下载之后 打开文件显示 [object Object]
打印出来 返回的 res 值 如下
把转换对象换成 res.data 就可以正常显示了 代码如下
// 以 doc 类型为例 , 其余类型可参照类型表替换 type 值
const blob = new Blob([res.data], { type: 'application/msword' });
fileName = window.URL.createObjectURL(blob);
//下载功能添加a标签 用downLoad属性下载 href地址为 新创建的地址
const a = document.createElement("a");
a.style.display = "none";
a.download = '文件名';
a.href = fileName;
document.body.appendChild(a);
a.click(); // 自动触发点击a标签的click事件
document.body.removeChild(a);
URL.createObjectURL() 创建新地址 因为在未转换的情况下 , 同域的文件地址可以直接下载 不同域的会在浏览器打开 为了统一管理 必须加上这个方法
实现下载功能时 手动添加a标签 并给a标签的href设置为新文件地址 ,设置a标签自动触发,结束后销毁标签
未使用统一转换地址遇到的问题:
执行下载时:
- 8080 下的文件可以直接下载 ,但是如 196. .... 这类地址 则会直接打开
- 把 a标签直接写在 dom里 href 用 data {}数据里定义好的变量
- 问题: 第一次加载时下载的网页 因为异步请求 dom里的数据还没有改变 并且数据绑定在触发事件的dom上 难以直接修改下载 (有好方法的同学可以给我留言交流)