当前位置：首页 > article >正文

vue3+ant design vue实现表格导出（后端返回文件流类型导出）

article 2024/9/22 6:24:58

1、之前的博客介绍了，依据页面展示的table表格数据为基础展示表格导出，今天介绍下后端返回文件流来实现表格导出。

<a-button class="btn" type="primary" @click="exportData1">导出</a-button>

import {ExportTheEmployeesTab } from '@/api/import';
// 导出
  import { downExcelUrl } from '@/utils/downloadFile';
  const searchRef = ref();
  const exportData1 = () => {
    const params = {
      staffName: formState.value.staffName,
      staffTag: formState.value.staffTag,
      staffDept: formState.value.staffDept,
    };
    // 导入方法
    downExcelUrl(ExportTheEmployeesTab(), params, '员工标签');
  };

//downloadFile.ts
import qs from 'qs';
export const downExcelUrl = (url, params, name) => {
  console.log('url', url, '参数', params, '文件名', name);
  if (params) {
    url += `?${qs.stringify(params)}`;
  }
  const elink = document.createElement('a'); // 创建a标签
  console.log('链接', url);
  elink.style.display = 'none';
  elink.download = name;
  elink.href = url;
  document.body.appendChild(elink);
  elink.click(); // 触发链接
  document.body.removeChild(elink);
};

import { request } from '@/utils/request';
let baseURL = '/api';
//导出员工标签
export const ExportTheEmployeesTab = () => {
  return `${baseURL}/staff-tag/export-tag`;
};

查看全文

http://www.kler.cn/news/294190.html