Bootstrap

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

问题

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;
      };
    },

编辑࿱

;