前端实现导出element-plus表格和从后端获取数据导出，支持勾选导出

1. 纯前端实现导出

安装file-saver和xlsx

file-saver： 用于在浏览器中触发文件的保存下载（保存为本地文件）。

使用场景： 当已经在 JavaScript 中生成了文件（如 Blob 对象），并想让用户保存它时使用。

npm install file-saver

xlsx： 读写 Excel 文件（.xlsx），支持从数据生成 Excel 文件或从 Excel 文件中解析数据。

使用场景：从前端导出 JSON 为 .xlsx 文件；从 .xlsx 文件中读取数据进行展示或处理。

npm install xlsx

导出element-plus表格，支持勾选导出，不勾选默认导出全部数据：

只导出勾选项：

  
    导出
  
  
    
    
    
    
    
      
        
          {{ getStatusText(row.status) }}
        
      
    
  


import { ref, computed } from 'vue';
import * as XLSX from 'xlsx';
import FileSaver from 'file-saver';
const tableData = [
  {
    date: '2016-05-04',
    name: 'Aleyna Kutzner',
    address: 'Lohrbergstr. 86c, Süd Lilli, Saarland',
    status: 0,
  },
  {
    date: '2016-05-03',
    name: 'Helen Jacobi',
    address: '760 A Street, South Frankfield, Illinois',
    status: 1,
  },
  {
    date: '2016-05-02',
    name: 'Brandon Deckert',
    address: 'Arnold-Ohletz-Str. 41a, Alt Malinascheid, Thüringen',
    status: 2,
  },
  {
    date: '2016-05-01',
    name: 'Margie Smith',
    address: '23618 Windsor Drive, West Ricardoview, Idaho',
    status: 1,
  },
];
const mergeRows = ref([]);
const STATUS_TEXT = {
  0: '未处理',
  1: '已处理',
  2: '已取消',
};
const STATUS_TAG_TYPE = {
  0: 'danger',
  1: 'primary',
  2: 'info',
}
const getStatusText = computed(() => status => STATUS_TEXT[status]);
const getStatusTagType = computed(() => status => STATUS_TAG_TYPE[status]);
const handleSelectionChange = selection => {
  mergeRows.value = selection;
};
const handleExport = async (fileName = 'export.xlsx') => {
  const originalData =
    mergeRows.value.length === 0 ? tableData : mergeRows.value;
  const headers = [
    { key: 'date', title: '日期', width: 20 },
    { key: 'name', title: '姓名', width: 30 },
    { key: 'address', title: '地址', width: 60 },
    { key: 'status', title: '状态', width: 20, formatter: getStatusText.value },
  ];
  const data = originalData.map(row =>
    Object.fromEntries(
      headers.map(({ key, title, formatter }) => [
        title,
        formatter ? formatter(row[key]) : row[key],
      ])
    )
  );
  // 生成 Sheet
  const worksheet = XLSX.utils.json_to_sheet(data);
  // 设置列宽
  worksheet['!cols'] = headers.map(({ width }) => ({ wch: width }));
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet);
  // 导出 Excel
  const excelBuffer = XLSX.write(workbook, {
    bookType: 'xlsx',
    type: 'array',
  });
  const blob = new Blob([excelBuffer], { type: 'application/octet-stream' });
  FileSaver.saveAs(blob, fileName);// 浏览器将下载 export.xlsx文件
};

2. 从后端获取数据导出

1. 情形1：后端返回链接的导出：window.location.href = 链接地址
2. 情形2：返回二进制/base数据的导出：先将得到的数据转成二进制，再用 new Blob()处理二进制生成文件，使用 createObjectURL() 生成链接，创建 a 标签元素模拟点击事件

async function handleExport() {
  const params = {
    selected_ids: mergeRows.value.map(row => row.id),
  };
  const res = await exportReservation(params);
  if (res.status===200) {
    // 返回的是base64编码
    const fileContent = res.data;
    // base64转为二进制
    const binaryString = atob(fileContent);
    const bytes = new Uint8Array(binaryString.length);
    for (let i = 0; i