vue项目前端下载文件，后端返回blob文件流

最新推荐文章于 2024-06-13 10:06:49 发布

谢晴吖

最新推荐文章于 2024-06-13 10:06:49 发布

阅读量6k

点赞数 4

分类专栏： blob vue 文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_63461833/article/details/124849853

版权

问题

1、在下载文件时，这时后台返回的是文件流，并不是文件下载路径。

2、后端接口返回的blob文件流，让你的后端设置流的编码为utf-8，还需要在下载的api里加上 responseType: "blob"，防止出现文件乱码。

后附文件下载、编辑、上传功能。

下载：

  //下载文件
    async downLoadFile() {
      //发请求下载文件
      const res = await Api.down(`file/download/${fid}`);
      //创建 blob 对象
      const blob = new Blob([res]);
      //创建一个唯一的 URL
      const url = URL.createObjectURL(blob);
      //下载文件
      //创建一个a标签
      const a = document.createElement("a");
      //将下载地址赋值给herf属性
      a.href = url;
      //设置下载文件的名字
      a.download = "index.js";
      a.click();
      //读文件  创建 FileReader 对象
      const reader = new FileReader();
      //文件内容转为 String
      reader.readAsText(blob);
      //当读取操作成功完成时调用
      reader.onload = () => {
        this.result = reader.result;
      };
    },