Vue3 导出excel

🙂博主：锅盖哒
🙂文章核心：导出excel

目录

首先，你需要安装xlsx库。可以使用npm或yarn来安装：

在Vue组件中，你可以使用xlsx库来生成Excel文件并提供一个导出按钮供用户下载。

---

 

       在Vue 3中，你可以使用第三方库xlsx来生成并导出Excel文件。下面是一个简单的实现示例：

首先，你需要安装xlsx库。可以使用npm或yarn来安装：

npm install xlsx --save

在Vue组件中，你可以使用xlsx库来生成Excel文件并提供一个导出按钮供用户下载。

<template>
  <div>
    <!-- 此处是你的页面内容 -->
    <button @click="exportToExcel">导出Excel</button>
  </div>
</template>

<script>
import XLSX from 'xlsx';

export default {
  methods: {
    exportToExcel() {
      // 获取需要导出的数据，此处为示例数据
      const data = [
        ['姓名', '年龄', '职业'],
        ['John Doe', 30, 'Developer'],
        ['Jane Smith', 25, 'Designer'],
        ['Bob Johnson', 35, 'Manager'],
      ];

      // 创建一个空的Workbook对象
      const wb = XLSX.utils.book_new();

      // 创建一个新的Worksheet
      const ws = XLSX.utils.aoa_to_sheet(data);

      // 将Worksheet添加到Workbook中
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

      // 生成Excel文件的Binary字符串
      const excelBinaryString = XLSX.write(wb, { type: 'binary' });

      // 将Binary字符串转换为Blob对象
      const blob = new Blob([s2ab(excelBinaryString)], { type: 'application/octet-stream' });

      // 导出Excel文件
      const fileName = 'example.xlsx';
      if (navigator.msSaveBlob) {
        // 兼容IE浏览器
        navigator.msSaveBlob(blob, fileName);
      } else {
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = fileName;
        link.click();
        URL.revokeObjectURL(link.href);
      }
    },
  },
};

// 将s字符串转换为Uint8Array
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;
}
</script>

       上述代码中，我们首先获取需要导出的数据，然后使用xlsx库来创建一个新的Excel Workbook，并在其中添加一个Worksheet，并将数据添加到该Worksheet中。最后，将Workbook导出为Binary字符串，然后将其转换为Blob对象，并提供一个下载链接供用户下载。

        请注意，以上示例是一个简单的Excel导出实现。在实际应用中，你可能需要更复杂的数据处理和更多的选项来配置导出的Excel文件。同时，要确保在使用XLSX.write导出Excel文件时，传递的type参数设置为'binary'，这样可以确保正确地生成Excel文件的Binary字符串。