vue excel上传预览和table内容下载到excel文件中

1. Vue Excel上传预览

在Vue中实现Excel上传预览，需要使用以下三个库：xlsx、file-saver、vue-xlsx。引入这三个库后，在Vue组件中可以实现以下代码：

<template>
  <div>
    <input type="file" @change="onUpload" />
    <p v-if="previewData.length > 0">
      <button @click="onDownload">下载Excel文件</button>
    </p>
    <table>
      <thead>
        <tr>
          <th v-for="header in headers">{{ header }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in previewData">
          <td v-for="value in row">{{ value }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import XLSX from "xlsx";
import { saveAs } from "file-saver";
import VueXlsx from "vue-xlsx";

export default {
  data() {
    return {
      headers: [],
      previewData: [],
    };
  },
  methods: {
    onUpload(event) {
      const file = event.target.files[0];
      if (!file) {
        return;
      }
      const reader = new FileReader();
      reader.onload = (e) => {
        const data = new Uint8Array(e.target.result);
        const workbook = XLSX.read(data, { type: "array" });
        const worksheet = workbook.Sheets[workbook.SheetNames[0]];
        const headers = VueXlsx.utils.sheet_to_json(worksheet)[0];
        const previewData = VueXlsx.utils.sheet_to_json(worksheet, { header: 1 });
        this.headers = headers;
        this.previewData = previewData.slice(1);
      };
      reader.readAsArrayBuffer(file);
    },
    onDownload() {
      const worksheet = VueXlsx.utils.json_to_sheet(this.previewData, {
        header: this.headers,
      });
      const workbook = VueXlsx.utils.book_new();
      VueXlsx.utils.book_append_sheet(workbook, worksheet);
      const data = VueXlsx.write(workbook, { bookType: "xlsx", type: "array" });
      const blob = new Blob([data], { type: "application/octet-stream" });
      saveAs(blob, "example.xlsx");
    },
  },
};
</script>

其中，onUpload方法用于读取Excel文件数据，解析并生成headers和previewData数据。previewData用于展示在组件中的表格中，headers用于渲染表头。而onDownload方法则用于将previewData以Excel文件的形式下载到本地。

1. Vue Table内容下载到Excel文件中

在Vue中实现将Table内容下载到Excel文件中，同样需要使用以上三个库，并新增一些方法和代码。在Vue组件中可以实现以下代码：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th v-for="header in headers">{{ header }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in tableData">
          <td v-for="value in row">{{ value }}</td>
        </tr>
      </tbody>
    </table>
    <button @click="onDownload">下载Excel文件</button>
  </div>
</template>

<script>
import XLSX from "xlsx";
import { saveAs } from "file-saver";
import VueXlsx from "vue-xlsx";

export default {
  data() {
    return {
      headers: ["名称", "价格", "数量"],
      tableData: [
        ["商品1", 10, 30],
        ["商品2", 20, 20],
        ["商品3", 5, 25],
      ],
    };
  },
  methods: {
    onDownload() {
      const worksheet = VueXlsx.utils.json_to_sheet([this.headers, ...this.tableData]);
      const workbook = VueXlsx.utils.book_new();
      VueXlsx.utils.book_append_sheet(workbook, worksheet);
      const data = VueXlsx.write(workbook, { bookType: "xlsx", type: "array" });
      const blob = new Blob([data], { type: "application/octet-stream" });
      saveAs(blob, "example.xlsx");
    },
  },
};
</script>

其中，headers和tableData分别为表格中的表头和数据。当用户点击“下载Excel文件”按钮时，程序会根据headers和tableData生成相应的Excel文件，并自动下载到本地。