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);
}

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 是一个前端框架,一般情况下不涉及后端文件操作,因此需要借助后端技术来实现导出 zip 包的功能。 一种常用的方法是,在前端将需要导出的数据发送到后端,后端将数据组织成 zip 包并返回给前端前端可以通过创建一个链接或者弹出下载框的方式来下载这个 zip 包。 具体的实现方式可以参考以下步骤: 1. 在前端将需要导出的数据发送到后端,可以通过 Ajax 或者 Fetch 等方式来发送请求。 2. 在后端使用相关的库(如 JSZip)来组织压缩包。将需要导出的文件添加到压缩包,并设置压缩包的名称、格式等属性。 3. 将生成的压缩包返回给前端,可以设置响应头来指定文件类型和文件名,以便浏览器正确处理下载请求。 以下是一个 Node.js 的示例代码: ```javascript const JSZip = require('jszip'); const fs = require('fs'); const path = require('path'); app.get('/export', async (req, res) => { // 获取需要导出的数据 const data = await getData(); // 创建一个 JSZip 实例 const zip = new JSZip(); // 将需要导出的文件添加到压缩包 zip.file('data.json', JSON.stringify(data)); // 生成压缩包 const content = await zip.generateAsync({ type: 'nodebuffer' }); // 设置响应头 res.set({ 'Content-Type': 'application/zip', 'Content-Disposition': 'attachment; filename=data.zip', }); // 将压缩包发送到客户端 res.send(content); }); ``` 在以上示例代码,使用了 JSZip 库来创建一个压缩包,并将需要导出的数据添加到压缩包。然后将生成的压缩包发送给客户端,客户端会根据响应头的信息来下载这个压缩包。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值