纯前端table表格导出excel文件,两种方法

先介绍第一种,因为第一种是直接获取dom节点的数据,可以直接快照形式捕获数据(比如获取过滤后或者格式化后的数据)

注意:依赖的版本,太高的话会报undefined

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import FileSaver from "file-saver";
import XLSX from "xlsx";
 
 
    /** 导出按钮操作 */
    exportExcel () {
      console.log(XLSX);
      /* generate workbook object from table */
      var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
         /* get binary string as output */
         var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
         try {
             FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheetjs.xlsx')
         } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
         return wbout
    },

  第二种是书写一个html表格,然后base64转换成xls

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
exportExcelTwo() {
      let titleList = ['id', '标题', '作者', 'page', 'status', '时间']
      this.tableToExcel(this.list,titleList)
    },
 
    tableToExcel(data, excelStr) {
      //要导出的json数据
      const jsonData = data || []
      //列标题
      let str = excelStr || '<tr><td></td></tr>';
      //循环遍历,每行加入tr标签,每个单元格加td标签
      for (let i = 0; i < jsonData.length; i++) {
        str += '<tr>';
        for (let item in jsonData[i]) {
          //增加\t为了不让表格显示科学计数法或者其他格式
          str += `<td>${jsonData[i][item] + '\t'}</td>`;
        }
        str += '</tr>';
      }
      //Worksheet名
      let worksheet = '方法二'
      let uri = 'data:application/vnd.ms-excel;base64,';
 
      //下载的表格模板数据
      let template = `<html xmlns:o="urn:schemas-microsoft-com:office:office"
        xmlns:x="urn:schemas-microsoft-com:office:excel"
        xmlns="http://www.w3.org/TR/REC-html40">
        <head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
          <x:Name>${worksheet}</x:Name>
          <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
          </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
          </head><body><table>${str}</table></body></html>`;
      //下载模板
      // window.location.href = uri + base64(template)
      //通过创建a标签实现
      let link = document.createElement("a");
      link.href = uri + this.base64(template);
      //对下载的文件命名
 
 
      link.download = '标题.xls';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
    //输出base64编码
    base64(s) {
      return window.btoa(unescape(encodeURIComponent(s)))
    }

  最后贴上两种方法都有的测试过程种的全部代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<template>
  <div class="app-container">
    <el-button @click="exportExcel">导出-方法一</el-button>
    <el-button @click="exportExcelTwo">导出-方法二</el-button>
    <el-table
    id="out-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 :formatter="formatter" 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 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: {
    formatter(row, column) {
      console.log(row.status);
      if(row.status === 'published') {
        return '成功了'
      } else if (row.status === 'draft') {
        return '失败了'
      } else {
        return row.status
      }
      },
    fetchData() {
      this.listLoading = true
      getList().then(response => {
        this.list = response.data.items
        this.listLoading = false
      })
    },
    /** 导出按钮操作 */
    exportExcel () {
      console.log(XLSX);
      /* generate workbook object from table */
      var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
         /* get binary string as output */
         var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
         try {
             FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheetjs.xlsx')
         } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
         return wbout
    },
 
    exportExcelTwo() {
      let titleList = ['id', '标题', '作者', 'page', 'status', '时间']
      this.tableToExcel(this.list,titleList)
    },
 
    tableToExcel(data, excelStr) {
      //要导出的json数据
      const jsonData = data || []
      //列标题
      let str = excelStr || '<tr><td></td></tr>';
      //循环遍历,每行加入tr标签,每个单元格加td标签
      for (let i = 0; i < jsonData.length; i++) {
        str += '<tr>';
        for (let item in jsonData[i]) {
          //增加\t为了不让表格显示科学计数法或者其他格式
          str += `<td>${jsonData[i][item] + '\t'}</td>`;
        }
        str += '</tr>';
      }
      //Worksheet名
      let worksheet = '方法二'
      let uri = 'data:application/vnd.ms-excel;base64,';
 
      //下载的表格模板数据
      let template = `<html xmlns:o="urn:schemas-microsoft-com:office:office"
        xmlns:x="urn:schemas-microsoft-com:office:excel"
        xmlns="http://www.w3.org/TR/REC-html40">
        <head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
          <x:Name>${worksheet}</x:Name>
          <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
          </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
          </head><body><table>${str}</table></body></html>`;
      //下载模板
      // window.location.href = uri + base64(template)
      //通过创建a标签实现
      let link = document.createElement("a");
      link.href = uri + this.base64(template);
      //对下载的文件命名
 
 
      link.download = '标题.xls';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
    //输出base64编码
    base64(s) {
      return window.btoa(unescape(encodeURIComponent(s)))
    }
 
  }
}
</script>

  

 

posted @   小白咚  阅读(5111)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
历史上的今天:
2020-01-10 将后台数据数组对象(对象里边包含数组对象)---改为前端想要的数组对象--改变key值(替换)
点击右上角即可分享
微信分享提示