【js-xlsx和file-saver插件】前端html的table导出数据到excel的表格增加表格标题行

基于上一篇随笔后,新需求需要再导出的表格上面加一行标题行

 1 function parse_dom_table_addtitle(table, _opts, title) {
 2         var opts = _opts || {};
 3         var oss = opts.defaultCellStyle || {};  /*单元格样式  */
 4         if (DENSE != null) opts.dense = DENSE;
 5         var ws = opts.dense ? ([]) : ({});
 6         var rows = table.getElementsByTagName('tr');
 7         var sheetRows = Math.min(opts.sheetRows || 10000000, rows.length);
 8         var range = { s: { r: 0, c: 0 }, e: { r: sheetRows+1 , c: 0 } };
 9         var merges = [], midx = 0;
10         var R = 1, _C = 0, C = 0, RS = 0, CS = 0;
11         var _title = title || ""; 
12         var title_o = { t: 's', v: _title, s: oss };
13         ws[encode_cell({ c: 0, r: 0 })] = title_o;
14         var maxc = 0;
15         for (; R < sheetRows+1; ++R) {
16             var nR = R - 1
17             var row = rows[nR];
18             var elts = (row.children);
19             for (_C = C = 0; _C < elts.length; ++_C) {
20                 var elt = elts[_C], v = htmldecode(elts[_C].innerHTML);
21                 for (midx = 0; midx < merges.length; ++midx) {
22                     var m = merges[midx];
23                     if (m.s.c == C && m.s.r <= R && R <= m.e.r) {
24                         C = m.e.c + 1; midx = -1;
25                     }
26                 }
27                 /* TODO: figure out how to extract nonstandard mso- style */
28                 CS = +elt.getAttribute("colspan") || 1;
29                 if ((RS = +elt.getAttribute("rowspan")) > 0 || CS > 1)
30                     merges.push({ s: { r: R, c: C }, e: { r: R + (RS || 1) - 1, c: C + CS - 1 } });
31                 var o = { t: 's', v: v, s: oss };
32                 var _t = elt.getAttribute("t") || "";
33                 if (v != null) {
34                     if (v.length == 0) o.t = _t || 's';
35                     else if (opts.raw || v.trim().length == 0 || _t == "s") { }
36                     else if (v === 'TRUE') o = { t: 'b', v: true, s: oss };
37                     else if (v === 'FALSE') o = { t: 'b', v: false, s: oss };
38                     else if (!isNaN(fuzzynum(v))) o = { t: 'n', v: fuzzynum(v), s: oss };
39                     else if (!isNaN(fuzzydate(v).getDate())) {
40                         o = ({ t: 'd', v: parseDate(v), s: oss });
41                         if (!opts.cellDates) o = ({ t: 'n', v: datenum(o.v), s: oss });
42                         o.z = opts.dateNF || SSF._table[14];
43                     }
44                 }
45                 if (opts.dense) { if (!ws[R]) ws[R] = []; ws[R][C] = o; }
46                 else ws[encode_cell({ c: C, r: R })] = o;
47                 /* 合并数据处理开始*/
48                 if (CS > 1) {
49                     for (var i = 1; i < CS; i++) {
50                         var newc = C + i
51                         if (RS > 1) {
52                             for (var m = 1; m < RS; m++) {
53                                 var newr = R + m;
54                                 ws[encode_cell({ c: newc, r: newr })] = o;
55                             }
56                         }
57                         else {
58                             ws[encode_cell({ c: newc, r: R })] = o;
59                         }
60                     }
61                 }
62                 else {
63                     if (RS > 1) {
64                         for (var m = 1; m < RS; m++) {
65                             var newr = R + m;
66                             ws[encode_cell({ c: C, r: newr })] = o;
67                         }
68                     }
69                     else {
70                         ws[encode_cell({ c: C, r: R })] = o;
71                     }
72                 }
73                 /*合并数据处理结束*/
74                 if (range.e.c < C) range.e.c = C;
75                 C += CS;
76                 if (maxc < C)
77                 {
78                     maxc = C;
79                 }
80             }
81             if (R == sheetRows)
82             {
83                 merges.push({ s: { r: 0, c: 0 }, e: { r: 0, c: maxc-1 } });
84             }
85         }
86         ws['!merges'] = merges;
87         ws['!ref'] = encode_range(range);
88         if (sheetRows < rows.length) ws['!fullref'] = encode_range((range.e.r = rows.length-1 , range));
89         return ws;
90     }

 

转载于:https://www.cnblogs.com/lilyshy/p/9007629.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Vue中的el-table组件是一个强大的表格组件,它可以方便地展示大量数据,并且支持分页功能。同时,借助前端file-saver,我们可以实现将el-table中的数据导出Excel文件。 要实现这个功能,首先需要在Vue项目中安装file-saver库。可以使用npm或者yarn命令进安装。 安装完毕后,我们可以在需要导出Excel的页面中引入file-saver库。 import { saveAs } from 'file-saver'; 在el-table数据源中,我们通常会使用一个数组来存储表格数据。假设我们的表格数据tableData,我们可以通过将这个数组转换为Excel文件来实现导出功能。 首先将表格数据转换为二维数组的形式,使得每一数据存储在一个小数组中。 const exportData = tableData.map(row => { return Object.values(row); }); 然后,我们可以使用file-saver库提供的saveAs函数来将数据导出Excel文件。我们需要将二维数组导出为一个csv格式的文本文件,并使用saveAs函数保存文件。 const csvContent = exportData.map(row => row.join(",")).join("\n"); const blob = new Blob(["\ufeff" + csvContent], { type: "text/csv;charset=utf-8" }); saveAs(blob, "export.csv"); 在上述代码中,我们首先将二维数组通过map和join方法转换为一个csv格式的字符串,然后使用Blob创建一个Blob对象,最后使用saveAs函数将Blob对象保存为一个名为export.csv的文件。 通过上述步骤,我们就可以实现在Vue中使用file-saver库将el-table中的分页数据导出Excel文件。导出的文件可以方便地在Excel中查看和处理。 ### 回答2: Vue的el-table组件和FileSaver,可以实现前端导出Excel导出分页数据的功能。 首先,我们需要引入el-table和FileSaver库,并确保已经正确配置了Vue项目。然后,在组件中使用el-table,并将分页数据绑定到el-table的data属性上。 接下来,我们需要添加一个导出按钮,用于触发导出操作。当按钮被点击时,我们可以通过el-table的方法将分页数据转换为一个二维数组,并使用FileSaver库将该数组导出Excel文件。 具体实现步骤如下: 1. 引入el-table和FileSaver库: ``` import FileSaver from 'file-saver'; import { ElTable, ElTableColumn } from 'element-ui'; ``` 2. 在组件中使用el-table,并将分页数据绑定到data属性上: ``` <template> <el-table :data="tableData"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> ... </el-table> </template> <script> export default { data() { return { tableData: [], // 分页数据 ... }; }, ... }; </script> ``` 3. 添加一个导出按钮,并在按钮的点击事件中执导出操作: ``` <template> <el-table :data="tableData"> ... </el-table> <el-button @click="exportExcel">导出Excel</el-button> </template> <script> export default { ... methods: { exportExcel() { const data = this.$refs.table.store.states.data; // 获取所有数据 const columns = this.$refs.table.columns.map(column => column.label); // 获取表头 const tableData = [columns, ...data]; // 构造二维数组 const worksheet = XLSX.utils.aoa_to_sheet(tableData); const workbook = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1'); const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' }); const blob = new Blob([excelBuffer], { type: 'application/octet-stream' }); FileSaver.saveAs(blob, 'data.xlsx'); }, ... } }; </script> ``` 以上代码通过el-table的$refs属性获取到el-table的实例,从而可以获取到所有数据和表头,并进导出操作。最后使用FileSaver库将二维数组保存为Excel文件,文件名为data.xlsx。 通过以上步骤,我们可以实现vue el-table前端导出Excel导出分页数据的功能。 ### 回答3: 在使用vue el-tablefile-saver前端导出Excel时,默认情况下只会导出当前展示页面的数据,无法导出分页数据。但我们可以通过以下步骤来实现导出分页数据的功能。 首先,我们需要手动获取所有需要导出数据。可以通过向后端发送请求获取所有数据的接口,并在前端将返回的数据合并。 然后,使用file-saver库将合并后的数据导出Excel文件。可以使用Blob对象将数据转换为二进制文件,再通过saveAs方法将二进制文件保存为Excel文件。 最后,展示给用户下载链接或直接自动下载导出Excel文件。 这样,我们就可以实现使用vue el-tablefile-saver前端导出分页数据的功能。 需要注意的是,如果数据量较大,一次性获取全部数据可能会影响前端性能和用户体验。因此,可以考虑在导出功能中添加限制,例如设置最大导出数量或者提供导出当前页和导出全部数据的选项供用户选择。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值