vue3——文件、xlsx下载方法封装

---

一、创建一个zipdownload.ts文件

代码如下（示例）：

import axios from 'axios'
import { useAdminInfo } from '/@/stores/adminInfo'//获取token
import { getUrl } from './axios'
import { ElLoading } from 'element-plus'
import { ElMessage } from 'element-plus'

const mimeMap = {
  xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
  zip: 'application/zip'
}
const adminInfo = useAdminInfo()

// const baseUrl = process.env.VUE_APP_BASE_API,
//'str'为下载路径
//'stly'为下载类型(默认xlsx)
//'name'下载文件名称
//'params'为入参
//'method'为请求方式(默认get请求)
export function downLoadZip(str: string, stly: string, name: string, params: Object, method: string) {
  var loading = ElLoading.service({
    lock: true,
    text: "下载中",
    background: "rgba(0, 0, 0, 0.7)",
  })
  var url = getUrl() + str

  let state = stly == "zip" ? mimeMap.zip : mimeMap.xlsx
  if (method == 'post') {
    var data = params;
    axios({
      method: method || 'get',
      url: url,
      responseType: 'blob',
      headers: { 'Batoken': adminInfo.getToken() },
      data
    }).then(response => {
      const res = response.data;
      if (res.type === 'text/html') {
        var enc = new TextDecoder('utf-8');
        res.arrayBuffer().then((buffer: any) => {
          let data = JSON.parse(enc.decode(new Uint8Array(buffer))) || {};
          loading.close();
          return ElMessage({
            message: data.message || '服务器繁忙，请刷新重试',
            type: 'error',
            duration: 5 * 1000
          })
        })
      } else {
        resolveBlob(response, state, name, loading)
      }
    })
  } else {
    axios({
      method: method || 'get',
      url: url,
      responseType: 'blob',
      headers: { 'Batoken': adminInfo.getToken() },
      params
    }).then(response => {
      const res = response.data;
      if (res.type === 'text/html') {
        var enc = new TextDecoder('utf-8');
        res.arrayBuffer().then((buffer: any) => {
          let data = JSON.parse(enc.decode(new Uint8Array(buffer))) || {};
          loading.close();
          return ElMessage({
            message: data.message || '服务器繁忙，请刷新重试',
            type: 'error',
            duration: 5 * 1000
          })
        })
      } else {
        resolveBlob(response, state, name, loading)
      }
    })
  }
}
/** 
* @desc :解析blob响应内容并下载
* @date :
* @param {*} res blob响应内容
* @param {String} mimeType MIME类型
* @author : liangdecheng
**/
export function resolveBlob(res: any, mimeType: string, name: string, loading: any) {
  const aLink = document.createElement('a')
  var blob = new Blob([res.data], { type: mimeType })
  // //从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;
  // var patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
  // var contentDisposition = decodeURI(res.headers['content-disposition'])
  // var result = patt.exec(contentDisposition)
  // var fileName = result[1]
  // fileName = fileName.replace(/\"/g, '')
  if (name == '') {
    let fileName = res.headers['content-disposition']
    var name = decodeURIComponent(fileName).split("*=UTF-8''")[1]
  }

  aLink.href = URL.createObjectURL(blob)
  aLink.setAttribute('download', name) // 设置下载文件名称
  document.body.appendChild(aLink)
  aLink.click()
  document.body.appendChild(aLink)
  loading.close();
}

二、在页面的使用

1.引入方法

代码如下（示例）：

 import { downLoadZip } from '/@/utils/zipdownload'

2.使用方法

代码如下（示例）：

 // 导出
const exportOk = () => {
    downLoadZip('/goods/exportExcel', 'xlsx', '商品数据', {}, 'post')
}