vue如何使用文件流進行下載(new Blob)

vue使用文件流進行下載(new Blob)

封裝方法

function getExel(url, params, index) {+
  return new Promise(function(resolve, reject) {
    let data = {
      method: "GET",
      url:url,
      headers: {
        'token':  gettoken("token")
      },
      responseType: 'arraybuffer'
    }
    resolve(axios(data));
  })
}

註意:responseType應設置為:'arraybuffer'

發送請求($Api已經掛載在瞭vue對象上,所以可以這麼使用)

this.$Api.getExel("/goodsCheckService/v1/planMaterial/export?idList="+idArray)
          .then(response => {
              let a = document.createElement('a');
 
              //ArrayBuffer 轉為 Blob
              let blob = new Blob([response.data], {type: "application/vnd.ms-excel"}); 
              
              let objectUrl = URL.createObjectURL(blob);
              a.setAttribute("href",objectUrl);
              a.setAttribute("download", '計劃單電子表格.xls');
              a.click();
});

vue下載文件流完整前後端代碼

使用Vue時,我們前端如何處理後端返回的文件流

首先後端返回流,這裡我把流的動作拿出來瞭,我很多地方要用

    /**
     * 下載單個文件
     *
     * @param docId
     */
    @GetMapping("/download/{docId}")
    public void download(@PathVariable("docId") String docId,
                         HttpServletResponse response) {
        outWrite(response, docId);
    }
    
    /**
     * 輸出文件流
     * @param response
     * @param docId
     */
    private void outWrite(HttpServletResponse response, String docId) {
        ServletOutputStream out = null;
        try {
            out = response.getOutputStream();
            // 禁止圖像緩存。
            response.setHeader("Pragma", "no-cache");
            response.setHeader("Cache-Control", "no-cache");
            response.setDateHeader("Expires", 0);
            byte[] bytes = docService.downloadFileSingle(docId);
            if (bytes != null) {
                MagicMatch match = Magic.getMagicMatch(bytes);
                String mimeType = match.getMimeType();
                response.setContentType(mimeType);
                response.addHeader("Content-Length", String.valueOf(bytes.length));
                out.write(bytes);
            }
            out.flush();
        } catch (Exception e) {
            UnitedLogger.error(e);
        } finally {
            IOUtils.closeQuietly(out);
        }
    }

前端這裡我引入瞭一個組件 js-file-download

npm install js-file-download --save

然後在Vue文件中添加進來

import fileDownload from "js-file-download";
   // 文檔操作列對應事件
    async handleCommand(item, data) {
      switch (item.key) {
        case "download":
          var res = await this.download(data);
          return fileDownload(res, data.name);
        ...
        default:
      }
      // 刷新當前層級的列表
      const folder = this.getLastFolderPath();
      this.listClick(folder.folderId, folder.name);
    },
    // 下載
    async download(row) {
      if (this.isFolder(row.type)) {
        return FolderAPI.download(row.id);
      } else {
        return DocAPI.download(row.id);
      }
    },

docAPI js 註意需要設置responseType

/**
 * 下載單個文件
 * @param {*} id
 */
const download = (id) => {
  return request({
    url: _DataAPI.download + id,
    method: "GET",
    responseType: 'blob'
  });
};

這樣即可成功下載 

以上為個人經驗,希望能給大傢一個參考,也希望大傢多多支持WalkonNet。

推薦閱讀: