vue+element后台管理系统(下载excel表格)

最新推荐文章于 2025-05-09 14:17:19 发布

王咸涛

最新推荐文章于 2025-05-09 14:17:19 发布

阅读量975

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/mywxtjj/article/details/107958866

本文介绍了在Vue后台管理系统中实现Excel表格下载的步骤：通过调用后台接口，传入url、data和类型参数；创建Blob实例处理返回数据；利用window.URL.createObjectURL生成下载链接；设置a标签并触发点击下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

标题 vue后台管理系统下载excel表格

1.调用后台接口传入三个参数，url,data参数，第三个参数为一个对象，表格下载返回类型。
2.创建 Blob实列传入后台返回的数据和以对象形式声明类型参数。
3.获取数据后调用window.URL。createObjectURL方法。传入blob实列对象。
4.接着生成url地址
5.定义url变量接收
6.创建一个a标签
7.把url赋值给a标签的href属性
8.调用a标签的setAttribute方法传入两个参数
9.第一个参数为download第二个参数是下载时表格的名称
10.把a标签放到body里
11.调用a标签的click方法`

    const vm = this
        const params ={
          createTimeStart: vm.searchForm.startTime,
          createTimeEnd: vm.searchForm.endTime,
        }
        vm.$axios.post('/match-admin/tax/getTaxFileExcel',params, {responseType: 'blob'})
            .then((response) => {
              console.log("response==",response)
              const url = window.URL.createObjectURL(new Blob([response.data],{ type: 'application/vnd.ms-excel;charset=utf-8' }));
              const link = document.createElement('a');
              link.href = url;
              link.setAttribute('download', '个人所得税扣缴申报总表.xls');
              document.body.appendChild(link);
              link.click();
            });`

     ## 兼容ie处理

export const downloadFile = (url,ext, params) => {
  let accessToken = getStore('accessToken');
  return axios({
    method: 'get',
    url: `${base}${url}`,
    params: params,
    headers: {
      'accessToken': accessToken
    },
    responseType: 'blob', //二进制流
  }).then(res => {
    // 处理返回的文件流
    const content = res;
    const blob = new Blob([content], { type: 'application/vnd.ms-excel;charset=utf-8' });
    var date =
      new Date().getFullYear() +
      "" +
      (new Date().getMonth() + 1) +
      "" +
      new Date().getDate() +
      "" +
      new Date().getHours() +
      "" +
      new Date().getMinutes() +
      "" +
      new Date().getSeconds() +
      "" +
      new Date().getMilliseconds();
    const fileName = date + "." + ext;
    if ("download" in document.createElement("a")) {
      // 非IE下载
      const elink = document.createElement("a");
      elink.download = fileName;
      elink.style.display = "none";
      elink.href = URL.createObjectURL(blob);
      document.body.appendChild(elink);
      elink.click();
      URL.revokeObjectURL(elink.href); // 释放URL 对象
      document.body.removeChild(elink);
    } else {
      // IE10+下载
      navigator.msSaveBlob(blob, fileName);
    }
  });
};