前端實現導入導出zip(解決火狐瀏覽器下載沒帶后綴bug)

前端框架 vue + antvue + ts + axios
場景： 實現導出zip包到本地，導出的zip包可以再編輯后導入系統

導出功能

將數據流轉成zip下載到本地

功能實現

使用a標簽的下載功能。
download可以設置下載文件的名稱
注意當使用download屬性實現下載時要添加后綴！！！
遇到的小坑：
1.download的兼容性不好，火狐ie之類的不會自動添加上后綴，在名稱后面追加.zip既可解決該兼容問題，並且在谷歌等正常瀏覽器中也不會重復
2.名稱如果是特殊字符谷歌瀏覽器也不會自動拼上后綴
如果這里文件名有帶時間戳一定要排除空格，帶空格的文件名火狐瀏覽器也會識別不了后綴！！！

 async handleExport() {
    this.exportLoading = true  // 觸發接口前loading
    const res = await service.getExportApp(this.appData.id)
    this.exportLoading = false // 接口響應完結束loading
    const blob = new Blob([res], { type: 'application/zip' })   // 指定格式
    const link = document.createElement('a'); 
    link.href = URL.createObjectURL(blob);
    link.download = `${this.appData.label}.zip` ;  // 指定導出名稱
    link.click();
    URL.revokeObjectURL(link.href);
    this.$message.success('應用導出成功')
  }

設置請求頭，后台返回數據流類型前端一定要設置responseType
沒設置responseType導出到本地的zip是解壓不出來的（改成txt后綴就 可以打開里面只有一個false）

/**
 * 導出應用
 * @param id 應用id
 */
export const getExportApp = (id) => {
  const params: object = {
    headers: {
      'Content-Type': 'application/json; charset=utf-8'
    },
    responseType: 'blob' // 表明返回服務器返回的數據類型
  }
  return axios.get(`/export/${id}`, params)
};

導入功能

使用了ant-vue 的upload組件，后台需要的參數是文件流，需要用new FormData();
beforeUpload 方法返回false來阻止默認上傳行為(沒返回false的話會觸發默認的action行為，就算沒設置action也會請求一個空的接口）
使用customRequest 通過覆蓋默認的上傳行為，自定義自己的上傳實現

// 模板
<a-upload-dragger
     name="file"
     accept=".zip"
     :show-upload-list="false"
     :before-upload="beforeUpload"
     @customRequest="handleUpload"
 >
   <p class="ant-upload-drag-icon">
          <a-icon type="upload" />
    </p>
    <p class="ant-upload-text">
            點擊拖拽上傳
    </p>

</a-upload-dragger>

js 實現

// 上傳之前
  beforeUpload(file: any) {
    this.handleUpload(file);
    return false;
  }
  // 自定義上傳方法（校驗可以放這兒）
  handleUpload(file: any) {
    console.log('beforeUpload')
    const ext: string = file.name.split('.').pop();
    if (!this.checkFileType(ext)) {
      this.$message.warning(`不支持 ${ext} 格式的圖片!`);
    } else {
      this.upload(file)
    }
  }
  // 上傳
  async upload(file: any) {
    const formData = new FormData();
    console.log(file)
    formData.append('file', file);  // 轉換成文件流
    const { code, data } = await service.putImportApp(formData)
    if (code === 0) this.success = true
  }

導入導出的請求頭跟默認的請求頭不一致，都需要重新設置
使用form-data 可傳輸大型二進制數據或者包含非ASCII字符的數據

/**
 * 導入應用
 * @param params 需要導入的文件 file : Zip
 */
export const putImportApp = (query) => {
  const params: object = {
    headers: {
      'Content-Type': 'multipart/form-data' 
    },
  }
  return axios.put(`/import`, query, params)
};