blob打开下载文件遇到 [object Object]

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上  难以直接修改下载  （有好方法的同学可以给我留言交流）