• 說明 本例中使用axios發(fā)送請求

1. 首先設(shè)置請求的響應(yīng)格式為blob

  //使用的axios攔截器對axios做了封裝 所以這里只是函數(shù)調(diào)用,給axios發(fā)請求時添加配置
  export const reqMyReportDownload = params => {
    return service({
        url: `/web/own/report/v1/download/${params}`,
        method: 'get',
        responseType: 'blob'
    })
  }

2. 轉(zhuǎn)化file流，添加后綴創(chuàng)建a標(biāo)簽實(shí)現(xiàn)下載

 reqMyReportDownload(record.id)
      .then(res => {
        const content = res  // 拿到file流
        const blob = new Blob([content])  //new Blob構(gòu)造函數(shù) 轉(zhuǎn)化鏈接使得可以直接在客戶端上創(chuàng)建和操作 Blob(可下載文件）
        const fileName = record.reportName + '.doc' //添加后綴,指定要變成什么格式的文件 
        if (window.navigator.msSaveOrOpenBlob) { // 如果有 就提供打開和保存對象
          navigator.msSaveBlob(blob, fileName);
        } else { 
          //如果沒有就手動創(chuàng)建a標(biāo)簽 設(shè)置樣式  填入鏈接 下載 最后刪除a標(biāo)簽
          const link = document.createElement('a');
          link.style.display = 'none';
          link.href = window.URL.createObjectURL(blob);
          link.download = fileName;
          document.body.appendChild(link); // 此寫法兼容可火狐瀏覽器
          link.click()
          URL.revokeObjectURL(link.href) // 釋放URL 對象
          document.body.removeChild(link)
        }
      })

• 關(guān)于blob構(gòu)造函數(shù) 文章
  https://blog.csdn.net/weixin_37704921/article/details/84324923