Vue element-admin 中使用檔案下載

邢闖洋發表於2022-02-13
Vue

前言

最近接到一個需求，要在後臺管理系統下載一個 zip，但是這個 zip 檔案是由介面生成並返回給前端的，介面返回的 content-type 是 application/zip，但這個時候前端是需要做特殊處理把介面返回的檔案流下載下來的。

實現

1. 請求介面

在請求介面是需要指定 responseType 為 blob，否則下載下來的檔案會無法解壓。

export function downloadKeyFile(param) {
  return request({
    url: '/terminal/downloadKeyFile',
    method: 'post',
    data: param,
    responseType: 'blob' // 表明返回伺服器返回的資料型別
  })
}

2. 攔截響應

由於使用了統一的介面設定，所有返回的資料都會在 request.js 中進行提前的過濾和篩選，所以需要在 request.js 中進行攔截介面返回的 content-type 為 application/zip 的響應，攔截後執行下載到使用者本地 zip 包的邏輯，下面直接貼具體程式碼：

const res = response.data

const respContentType = response.headers['content-type']
// 如果響應型別是 zip 包，則執行下載檔案邏輯
if (respContentType === 'application/zip') {
  if (!res) {
    return
  }
  const url = window.URL.createObjectURL(new Blob([res], {
    type: 'application/zip'
  }))
  const link = document.createElement('a')
  link.style.display = 'none'
  link.href = url
  link.setAttribute('download', 'appIconZip.zip')
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  return
}

參考文章

vue element admin 中使用檔案下載
vue 檔案下載（需呼叫介面）
PHP 使用 ZipArchive 打包 zip

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章