快速掌握 HTML5 和 Vue 中的数据导出表格技巧

2024-01-30 03:47:48

表格数据导出：全面指南

在当今数据驱动的世界中，表格是用于组织和呈现大量信息的重要工具。为了满足不同的业务和分析需求，经常需要将表格数据导出到其他格式，例如 CSV、Excel 或 PDF。本文将深入探讨在 HTML5 和 Vue 中将表格数据导出为各种格式的最佳实践和技术。

1. HTML5 中的表格导出

对于简单的表格，可以使用纯 HTML5 和 JavaScript 直接从页面中导出数据。

<table id="table-to-export">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>20</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>25</td>
      <td>上海</td>
    </tr>
  </tbody>
</table>

<button onclick="exportTableToCSV()">导出为 CSV</button>

<script>
  function exportTableToCSV() {
    let csv = '';
    let rows = document.querySelectorAll('#table-to-export tbody tr');

    for (let i = 0; i < rows.length; i++) {
      let cells = rows[i].querySelectorAll('td');
      for (let j = 0; j < cells.length; j++) {
        csv += cells[j].innerText + ',';
      }
      csv += '\n';
    }

    let hiddenElement = document.createElement('a');
    hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
    hiddenElement.target = '_blank';
    hiddenElement.download = 'data.csv';
    hiddenElement.click();
  }
</script>

2. Vue 搭配 Element UI 的表格导出

当使用 Vue 框架和 Element UI 组件库时，可以使用 el-table-export 组件轻松导出表格数据。

<el-table :data="tableData" ref="table">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="city" label="城市"></el-table-column>
  <el-table-column>
    <template slot-scope="scope">
      <el-button type="text" @click="exportCSV(scope.$index)">导出 CSV</el-button>
    </template>
  </el-table-column>
</el-table>

<script>
  export default {
    methods: {
      exportCSV(index) {
        this.$refs.table.exportCsv({
          filename: 'data.csv',
          rowRange: [index, index]
        });
      }
    }
  }
</script>

3. 分页导出大数据量表格

对于包含大量数据的表格，可以使用分页导出功能来避免浏览器性能问题。

<div>
  <el-table :data="tableData" ref="table">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="city" label="城市"></el-table-column>
  </el-table>

  <el-pagination
    :current-page="currentPage"
    :page-size="pageSize"
    :total="total"
    @current-change="handleChangePage"
  ></el-pagination>

  <el-button type="primary" @click="exportAllCSV">导出全部</el-button>
</div>

<script>
  export default {
    data() {
      return {
        currentPage: 1,
        pageSize: 10,
        total: 100,
        tableData: []
      };
    },
    methods: {
      handleChangePage(page) {
        this.currentPage = page;
        this.tableData = []; // 这里应该通过接口请求获取当前页的数据
      },
      exportAllCSV() {
        for (let i = 1; i <= Math.ceil(this.total / this.pageSize); i++) {
          this.$refs.table.exportCsv({
            filename: 'data.csv',
            page: i
          });
        }
      }
    }
  }
</script>