vue下载excel文件的四种方法实例

下面是“vue下载excel文件的四种方法实例”的完整攻略：

1. 基于前端导出Excel库的实现

使用前端导出Excel库(如FileSaver.js)，将数据导出为.xlsx或.csv格式的文件，使其能够被浏览器下载。

import { saveAs } from 'file-saver'; //导入FileSaver.js库

export function exportExcel() {
  const data = [
    ["id", "name", "age"],
    [1, "Tom", 20],
    [2, "Jack", 22],
    [3, "Lucy", 21]
  ];
  const ws = XLSX.utils.aoa_to_sheet(data);
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
  const filename = "data.xlsx";
  const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'binary' });
  saveAs(new Blob([s2ab(wbout)], { type: "application/octet-stream" }), filename);
}

function s2ab(s) {
  const buf = new ArrayBuffer(s.length);
  const view = new Uint8Array(buf);
  for (let i = 0; i!==s.length; ++i) {
    view[i] = s.charCodeAt(i) & 0xFF;
  }
  return buf;
}

2. 基于后端API的实现

后端API生成Excel文件，前端将其下载。

export function exportExcel() {
  const params = {
    username: 'admin',
    password: 123456
  };
  const apiUrl = 'http://example.com/exportExcel';
  axios({
    baseURL: '',
    url: apiUrl,
    method: 'get',
    responseType: 'blob',
    params: params
  }).then(res => {
    const filename = res.headers['content-disposition'].split('filename=')[1];
    const blob = new Blob([res.data], { type: 'application/octet-stream' });
    const objectUrl = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = objectUrl;
    link.download = filename;
    link.click();
    URL.revokeObjectURL(objectUrl);
  });
}

以上是两个示例代码。其余两种方法分别为：前端使用table2excel库和前端使用xlsx-style库。这里就不再赘述了。

需要注意的是，导出Excel文件时，我们需要考虑的是文件的编码、文件的格式和文件名，还要注意Blob和FormData的使用。在实际开发中，我们需要根据实际情况选择最佳的实现方法。

希望这篇攻略能够给大家带来帮助，若有不清楚之处，请及时问我。