vue の純粋なフロントエンド ダウンロード フォーム、エクスポート形式は .xlsx (フロントエンドがページングされていないことを前提としており、記事の最後に実行デモが添付されているので、自分でダウンロードできます)

vue の純粋なフロントエンド ダウンロード フォーム、エクスポート形式は .xlsx (フロントエンドがページングされていないことを前提としており、記事の最後に実行デモが添付されているので、自分でダウンロードできます)

1. 依存関係をインストールおよびダウンロードする

npm install --save xlsx file-saver
或
cnpm install --save xlsx file-saver

2. インストールされている 2 つのライブラリをコードにインポートします

3. テーブル ノードは後で ID セレクターを通じて取得されるため、el-table に ID セレクターを忘れずに追加してください。

4. 具体的なコード実装。次のコードは、固定列なしのクリアを実現するものです。つまり、el-table-column に固定属性がありません。

<template>
  <div class="app-container">
    <el-button size="small" icon="el-icon-tickets" style="margin-bottom: 20px;" type="warning" @click="exportExcel">
      导出数据
    </el-button>
    <el-table id="table" v-loading="listLoading" :data="list" element-loading-text="Loading" border fit
      highlight-current-row>
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {
    
    {
    
     scope.$index }}
        </template>
      </el-table-column>
      <el-table-column label="Title">
        <template slot-scope="scope">
          {
    
    {
    
     scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column label="Author" width="110" align="center">
        <template slot-scope="scope">
          <span>{
    
    {
    
     scope.row.author }}</span>
        </template>
      </el-table-column>
      <el-table-column label="Pageviews" width="110" align="center">
        <template slot-scope="scope">
          {
    
    {
    
     scope.row.pageviews }}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="Status" width="110" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statusFilter">{
    
    {
    
     scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="Display_time" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{
    
    {
    
     scope.row.display_time }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {
    
     getList } from '@/api/table'
import FileSaver from 'file-saver';
import * as XLSX from 'xlsx'

export default {
    
    
  filters: {
    
    
    statusFilter(status) {
    
    
      const statusMap = {
    
    
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    
    
    return {
    
    
      list: null,
      listLoading: true
    }
  },
  created() {
    
    
    this.fetchData()
  },
  methods: {
    
    
    //纯前端导出excel表格
    //导出spc数据表格
    exportExcel() {
    
    
      let now = new Date();
      let year = now.getFullYear();
      let month = ("0" + (now.getMonth() + 1)).slice(-2);
      let day = ("0" + now.getDate()).slice(-2);
      let hour = ("0" + now.getHours()).slice(-2);
      let minute = ("0" + now.getMinutes()).slice(-2);
      let second = ("0" + now.getSeconds()).slice(-2);
      let formattedTime = `${
      
      year}-${
      
      month}-${
      
      day} ${
      
      hour}：${
      
      minute}：${
      
      second}`; //获取当前时间，通过时间区分后续下载的文件，看个人意愿自定义添加标题信息
      let xlsxParam = {
    
     raw: true } // 导出的内容只做解析，不进行格式转换，这样就可以解决时间格式乱码的问题
      let fix = document.querySelector('.el-table__fixed') // 判断是否有固定列,有则先移除,导出完成后再添加回去,否则会导致导出的表格错乱
      let exportTable;
      if (fix) {
    
    
        exportTable = XLSX.utils.table_to_book(document.querySelector('#table').removeChild(fix), xlsxParam); // 有固定列的时候，先移除固定列，导出完成后再添加回去
        document.querySelector('#table').appendChild(fix);  // 有固定列的时候，导出完成后再添加回去
      } else {
    
    
        exportTable = XLSX.utils.table_to_book(document.querySelector('#table')); // 没有固定列的时候，直接导出
      }
      let exportTableOut = XLSX.write(exportTable, {
    
     bookType: 'xlsx', bookSST: true, type: 'array' }) // 导出的数据类型
      try {
    
    
        FileSaver.saveAs(
          new Blob([exportTableOut], {
    
    
            type: 'application/octet-stream'
          }),
          `表格-${
      
      formattedTime}.xlsx`) // 导出的文件名，可自定义，使用模板字符串语法``包裹,可以区分每次下载的文件
      } catch (e) {
    
    
        if (typeof console !== 'undefined') {
    
    
          console.log(e, exportTableOut)
        }
      }
      return exportTableOut
    },
    fetchData() {
    
    
      this.listLoading = true
      getList().then(response => {
    
    
        this.list = response.data.items
        this.listLoading = false
      })
    }
  }
}
</script>

5. ダウンロード成功後の表表示

6. 注意が必要な点は、テーブルの el-table-column で fix='right' が使用されている場合、let fix = document.querySelector('.el-table__fixed') を let fix = document に変更する必要があることです。 .querySelector(“.el-table__fixed-right”))

7. コードリファレンス:純粋なフロントエンドエクスポート Excel