vue3导出excel表格方式之一——xlsx文件

h_jQuery

已于 2022-05-23 16:19:37 修改

阅读量2.5k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript 前端 vue.js

于 2022-05-23 16:10:27 首次发布

本文链接：https://blog.csdn.net/h_jQuery/article/details/124929222

这篇博客展示了如何在Vue应用中结合'xlsx'和'file-saver'库来实现表格数据的导出为Excel文件。通过点击按钮，用户可以将包含日期、姓名和地址的数据导出为.xlsx格式，文件名为当前日期。示例代码详细解释了整个过程。

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

下载插件

"element-plus": "^2.2.1",
"file-saver": "^2.0.5",
"xlsx": "^0.17.4"

<script setup>
import { reactive, ref } from "vue";
import XLXS from "xlsx";
import FileSaver from "file-saver";
defineProps({
  msg: String,
});
const count = ref(0);
const state = reactive({
  excelTitle: "表格标题1",
});
const tableData = reactive([
  {
    date: "2016-05-02",
    name: "王小虎",
    address: "上海市普陀区金沙江路 1518 弄",
  },
  {
    date: "2016-05-04",
    name: "王小虎",
    address: "上海市普陀区金沙江路 1517 弄",
  },
  {
    date: "2016-05-01",
    name: "王小虎",
    address: "上海市普陀区金沙江路 1519 弄",
  },
  {
    date: "2016-05-03",
    name: "王小虎",
    address: "上海市普陀区金沙江路 1516 弄",
  },
]);
const exportClick = () => {
  // 设置当前日期
  let time = new Date();
  let year = time.getFullYear();
  let month = time.getMonth() + 1;
  let day = time.getDate();
  let name = year + "" + month + "" + day;
  // 导出文件名
  const filename = state.excelTitle;
  // 通过id，获取导出的表格数据
  const wb = XLXS.utils.table_to_book(document.getElementById("table"), {
    raw: true,
  });
  const wbout = XLXS.write(wb, {
    bookType: "xlsx",
    bookSST: true,
    type: "array",
  });
  try {
    FileSaver.saveAs(
      new Blob([wbout], {
        type: "application/octet-stream",
      }),
      name + ".xlsx"
    );
  } catch (e) {
    console.log(e);
  }
  return wbout;
};
</script>

<template>
  <div class="home">
    <button type="button" @click="exportClick()">导出pdf</button>
    <div id="table">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style scoped>
#pdfDom {
  color: #42b983;
}
</style>

大部分参照了其他博主的内容