vue 中导出的方法,导出xls/zip/mp4等

在我的项目中会用到导出功能,导出xls/zip/mp4文件的需求,所以直接整合一下导出功能的方法

首先引入方法

import { downloadXls, downloadZip } from "@/utils/download";

然后再运用,我这个地方是需要按日导出.xls文件和按月导出.zip文件

    //  下载xls/zip文件
    handelDownload(obj, names, val) {
      let fileName = obj.aname + "工艺运行记录表" + names + "导出数据";
      let newName = val == 1 ? ".xls" : ".zip";
      this.$confirm(
        `  此操作将下载 “" ${fileName} "${newName}” 文件, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          const datas = {
            type: val,
            ...this.form,
          };
          this.$api.reportManagement.exportMonitorData(datas).then((res) => {
            val == 1 ? downloadXls(res, fileName) : downloadZip(res, fileName);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: `已取消下载${names}数据`,
          });
        });
    },

最后放上js文件

// 下载文件
export function download(data) {
  if (!data) {
    return;
  }
  let url = window.URL.createObjectURL(new Blob([data]));
  let link = document.createElement("a");
  link.style.display = "none";
  link.href = url;
  link.setAttribute("download", "excel.xlsx");
  document.body.appendChild(link);
  link.click();
}

export function downloadVideo(data) {
  if (!data) {
    return;
  }
  let url = window.URL.createObjectURL(new Blob([data]));
  let link = document.createElement("a");
  link.style.display = "none";
  link.href = url;
  link.download = "files.mp4";
  document.body.appendChild(link);
  link.click();
}

// 下载zip
export function downloadZip(data, fileName) {
  if (!data) {
    return;
  }
  let blob = new Blob([data], { type: "application/zip" });
  let url = window.URL.createObjectURL(blob);
  const link = document.createElement("a"); // 创建a标签
  link.href = url;
  link.download = fileName; // 重命名文件
  link.click();
  URL.revokeObjectURL(url); // 释放内存
}

//下载PDF
export function downloadPdf(res, fileName) {
  // // 创建blob对象，解析流数据
  // const blob = new Blob([res], {
  //   // 如何后端没返回下载文件类型，则需要手动设置：type: 'application/pdf;chartset=UTF-8' 表示下载文档为pdf，如果是word则设置为msword，excel为excel
  //   type: 'application/pdf;chartset=UTF-8'
  // })
  // const a = document.createElement('a')
  // // 兼容webkix浏览器，处理webkit浏览器中href自动添加blob前缀，默认在浏览器打开而不是下载
  // const URL = window.URL || window.webkitURL
  // // 根据解析后的blob对象创建URL 对象
  // const herf = URL.createObjectURL(blob)
  // // 下载链接
  // a.href = herf
  // // 下载文件名,如果后端没有返回，可以自己写a.download = '文件.pdf'
  // a.download = fileName
  // document.body.appendChild(a)
  // a.click()
  // document.body.removeChild(a)
  // // 在内存中移除URL 对象
  // window.URL.revokeObjectURL(herf)
  let blob = new Blob([res], { type: "application/pdf;chartset=UTF-8" });
  const link = document.createElement("a");
  var explorer = window.navigator.userAgent; //获取浏览器；
  if (
    !!window.ActiveXObject ||
    "ActiveXObject" in window ||
    navigator.userAgent.indexOf("Edge") > -1
  ) {
    navigator.msSaveBlob(blob, fileName + ".pdf");
  } else {
    link.style.display = "none";
    link.href = URL.createObjectURL(blob);
    link.download = fileName; //下载的文件名
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    // const a = document.createElement("a");
    // const URL = window.URL || window.webkitURL;
    // // 根据解析后的blob对象创建URL 对象
    // const herf = URL.createObjectURL(blob);
    // // 下载链接
    // a.href = herf;
    // // 下载文件名,如果后端没有返回，可以自己写a.download = '文件.pdf'
    // a.download = fileName;
    // document.body.appendChild(a);
    // a.click();
    // document.body.removeChild(a);
    // // 在内存中移除URL 对象
    // window.URL.revokeObjectURL(herf);
  }
}

// 自定义下载文件名
export function downloadXls(data, fileName) {
  if (!data) {
    return;
  }
  let url = window.URL.createObjectURL(new Blob([data]));
  let link = document.createElement("a");
  link.style.display = "none";
  link.href = url;
  link.setAttribute("download", fileName + ".xls");
  document.body.appendChild(link);
  link.click();
}

// ISC对接视频插件下载
export function dowloadISCPlug() {
  // let url = "http://192.168.2.113:8089/upload/exe/VideoWebPlugin.exe"  //测试
  let url = "http://222.184.25.234:28888/upload/exe/VideoWebPlugin.exe"; //生产
  let link = document.createElement("a");
  link.style.display = "none";
  link.href = url;
  link.download = "视频插件下载";
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}