前端下载文件、压缩包

一、下载文件

后端直接返回文件下载链接

javascript 复制代码

/**
 * 解析文件名称
 * @param {string} filePath 文件地址
 */
export function parseFileName(filePath) {
  let tempPath = filePath.split('/')
  let fileName = tempPath[tempPath.length - 1]
  if (!fileName) return ''
  return decodeURIComponent(fileName.split('?')[0].split('#')[0])
},

/**
 * 下载文件通用
 * @param {string} filePath 文件地址
 * @param {string} [downloadName] 文件名称
 */
export function downloadFileGeneral(filePath, downloadName) {
  // 创建一个虚拟的链接元素
  const link = document.createElement('a');
  link.href = filePath; // 文件路径
  // 如果没有下载文件名称
  if (!downloadName) {
    downloadName = parseFileName(filePath)
  }
  link.download = downloadName; // 下载时文件的名称
  // 链接隐藏
  link.style.display = 'none';
  // 将链接添加到文档中
  document.body.appendChild(link);
  // 触发点击事件
  link.click();
  // 移除链接元素
  document.body.removeChild(link);
}

二、下载压缩包

调用下载压缩包接口，后端返回文件流

javascript 复制代码

/**
 * 下载压缩包通用（文件流）
 * @param {string} fileBlob 文件流
 * @param {string} compressedFile 压缩包名字
 */
export function downloadZip(fileBlob, compressedFile) {
  // 创建Blob对象
  const blob = new Blob([fileBlob], { type: "application/zip" });
  // 创建下载链接
  const downloadUrl = window.URL.createObjectURL(blob);
  const link = document.createElement("a");
  link.href = downloadUrl;
  link.download = compressedFile;
  document.body.appendChild(link);
  // 触发点击下载
  link.click();
  // 清理
  window.URL.revokeObjectURL(downloadUrl);
  document.body.removeChild(link);
}

调用下载方法

javascript 复制代码

    handleDownAll() {
      packageDownload({
        sourceDocId: this.id,
        sourceDocType: 1,
      }).then(async (res) => {
        await downloadZip(res, "文件压缩包");
        this.$message.success("下载成功");
      });
    },

注意：在请求压缩包接口的时候需要指定 responseType: blob，否则下载下来的压缩包可能无法解压

javascript 复制代码

// 下载文件压缩包
export function packageDownload(data) {
  return request({
    url: '/common/service/packageDownload',
    method: 'post',
    responseType: 'blob', // 重要！指定响应类型为blob
    data: data
  })
}

这世界很喧嚣，做你自己就好