Vue.js 将Bootstrap表格导出为Excel或PDF

在本文中，我们将介绍如何使用Vue.js将Bootstrap表格导出为Excel或PDF文件。我们将使用两个主要的JavaScript库来实现这个功能：xlsx库用于将表格导出为Excel文件，jspdf库用于将表格导出为PDF文件。

阅读更多：Vue.js 教程

准备工作

在开始之前，我们需要安装必要的依赖。

首先，我们需要安装xlsx库。在命令行中运行以下命令：

npm install xlsx

然后，我们需要安装jspdf库。同样，在命令行中运行以下命令：

npm install jspdf

现在我们已经安装了所需的库，我们可以开始编写代码了。

导出为Excel

首先，让我们创建一个Vue组件来展示我们的表格。在Vue组件的template中，我们使用Bootstrap的table标签来创建一个简单的表格。

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>邮箱</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in tableData" :key="index">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.email }}</td>
        </tr>
      </tbody>
    </table>
    <button @click="exportToExcel">导出为Excel</button>
  </div>
</template>

<script>
import { utils } from 'xlsx';

export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 25, email: 'zhangsan@example.com' },
        { name: '李四', age: 30, email: 'lisi@example.com' },
        { name: '王五', age: 35, email: 'wangwu@example.com' }
      ]
    };
  },
  methods: {
    exportToExcel() {
      const worksheet = utils.json_to_sheet(this.tableData);
      const workbook = utils.book_new();
      utils.book_append_sheet(workbook, worksheet, 'Sheet1');
      const excelBuffer = utils.write(workbook, { type: 'buffer', bookType: 'xlsx' });
      this.saveFile(excelBuffer, 'table.xlsx');
    },
    saveFile(buffer, fileName) {
      const blob = new Blob([buffer], { type: 'application/octet-stream' });
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = fileName;
      link.click();
      URL.revokeObjectURL(link.href);
    }
  }
};
</script>

在上面的代码中，我们定义了一个tableData数组来存储表格数据。然后，我们在template中使用v-for指令遍历tableData数组，将数据展示为表格行。最后，我们还添加了一个按钮，当点击它时，将触发exportToExcel方法。

在exportToExcel方法中，我们首先使用utils.json_to_sheet函数将数据转换为工作表对象。然后，我们创建一个新的工作簿对象，并将工作表添加到其中。接下来，我们使用utils.write函数将工作簿写入Excel文件的缓冲区。最后，我们使用saveFile函数将缓冲区保存为Excel文件并下载。

现在，当我们点击“导出为Excel”按钮时，将会下载一个包含表格数据的Excel文件。

导出为PDF

接下来，让我们继续以相同的方式导出表格为PDF文件。

首先，我们需要安装html2canvas和canvg库。这两个库将帮助我们将HTML元素渲染为Canvas，并将Canvas导出为图片。

npm install html2canvas
npm install canvg

进一步，我们需要更新模板代码。我们将在表格外包装一个div元素，并为该元素设置一个特殊的ref属性。将以下代码添加到Vue组件的template中：

<template>
  <div>
    <div ref="tableWrapper">
      <table>
        <!-- 表格内容 -->
      </table>
    </div>
    <button @click="exportToPDF">导出为PDF</button>
  </div>
</template>

然后，我们需要更新Vue组件的JavaScript部分。

<script>
// ...

export default {
  // ...

  methods: {
    // ...

    exportToPDF() {
      const tableWrapper = this.$refs.tableWrapper;
      html2canvas(tableWrapper).then((canvas) => {
        const imgData = canvas.toDataURL('image/png');
        const pdf = new jsPDF();
        pdf.addImage(imgData, 'PNG', 0, 0);
        pdf.save('table.pdf');
      });
    }
  }
};
</script>

在上面的代码中，我们首先获取包装表格的div元素的引用，并将其赋值给tableWrapper变量。

然后，我们使用html2canvas库将tableWrapper元素渲染为Canvas对象。一旦我们获得了Canvas对象，我们可以使用toDataURL方法将其转换为Base64编码的图像数据。

接下来，我们创建一个新的jsPDF实例，并使用addImage方法将图像数据添加到PDF文件中。

最后，我们使用save方法将PDF文件保存为用户可下载的文件。

现在，当我们点击“导出为PDF”按钮时，将会下载一个包含表格数据的PDF文件。