.
This commit is contained in:
NLRX-WJC
206
ExportExcel/Export2Excel.js
Normal file
206
ExportExcel/Export2Excel.js
Normal file
@@ -0,0 +1,206 @@
|
||||
/* eslint-disable */
|
||||
require('file-saver');
|
||||
import XLSX from 'xlsx'
|
||||
|
||||
function generateArray(table) {
|
||||
var out = [];
|
||||
var rows = table.querySelectorAll('tr');
|
||||
var ranges = [];
|
||||
for (var R = 0; R < rows.length; ++R) {
|
||||
var outRow = [];
|
||||
var row = rows[R];
|
||||
var columns = row.querySelectorAll('td');
|
||||
for (var C = 0; C < columns.length; ++C) {
|
||||
var cell = columns[C];
|
||||
var colspan = cell.getAttribute('colspan');
|
||||
var rowspan = cell.getAttribute('rowspan');
|
||||
var cellValue = cell.innerText;
|
||||
if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;
|
||||
|
||||
//Skip ranges
|
||||
ranges.forEach(function (range) {
|
||||
if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {
|
||||
for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
|
||||
}
|
||||
});
|
||||
|
||||
//Handle Row Span
|
||||
if (rowspan || colspan) {
|
||||
rowspan = rowspan || 1;
|
||||
colspan = colspan || 1;
|
||||
ranges.push({
|
||||
s: {
|
||||
r: R,
|
||||
c: outRow.length
|
||||
},
|
||||
e: {
|
||||
r: R + rowspan - 1,
|
||||
c: outRow.length + colspan - 1
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//Handle Value
|
||||
outRow.push(cellValue !== "" ? cellValue : null);
|
||||
|
||||
//Handle Colspan
|
||||
if (colspan)
|
||||
for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
|
||||
}
|
||||
out.push(outRow);
|
||||
}
|
||||
return [out, ranges];
|
||||
};
|
||||
|
||||
function datenum(v, date1904) {
|
||||
if (date1904) v += 1462;
|
||||
var epoch = Date.parse(v);
|
||||
return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
|
||||
}
|
||||
|
||||
function sheet_from_array_of_arrays(data, opts) {
|
||||
var ws = {};
|
||||
var range = {
|
||||
s: {
|
||||
c: 10000000,
|
||||
r: 10000000
|
||||
},
|
||||
e: {
|
||||
c: 0,
|
||||
r: 0
|
||||
}
|
||||
};
|
||||
for (var R = 0; R != data.length; ++R) {
|
||||
for (var C = 0; C != data[R].length; ++C) {
|
||||
if (range.s.r > R) range.s.r = R;
|
||||
if (range.s.c > C) range.s.c = C;
|
||||
if (range.e.r < R) range.e.r = R;
|
||||
if (range.e.c < C) range.e.c = C;
|
||||
var cell = {
|
||||
v: data[R][C]
|
||||
};
|
||||
if (cell.v == null) continue;
|
||||
var cell_ref = XLSX.utils.encode_cell({
|
||||
c: C,
|
||||
r: R
|
||||
});
|
||||
|
||||
if (typeof cell.v === 'number') cell.t = 'n';
|
||||
else if (typeof cell.v === 'boolean') cell.t = 'b';
|
||||
else if (cell.v instanceof Date) {
|
||||
cell.t = 'n';
|
||||
cell.z = XLSX.SSF._table[14];
|
||||
cell.v = datenum(cell.v);
|
||||
} else cell.t = 's';
|
||||
|
||||
ws[cell_ref] = cell;
|
||||
}
|
||||
}
|
||||
if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);
|
||||
return ws;
|
||||
}
|
||||
|
||||
function Workbook() {
|
||||
if (!(this instanceof Workbook)) return new Workbook();
|
||||
this.SheetNames = [];
|
||||
this.Sheets = {};
|
||||
}
|
||||
|
||||
function s2ab(s) {
|
||||
var buf = new ArrayBuffer(s.length);
|
||||
var view = new Uint8Array(buf);
|
||||
for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
|
||||
return buf;
|
||||
}
|
||||
|
||||
export function export_table_to_excel(id) {
|
||||
var theTable = document.getElementById(id);
|
||||
var oo = generateArray(theTable);
|
||||
var ranges = oo[1];
|
||||
|
||||
/* original data */
|
||||
var data = oo[0];
|
||||
var ws_name = "SheetJS";
|
||||
|
||||
var wb = new Workbook(),
|
||||
ws = sheet_from_array_of_arrays(data);
|
||||
|
||||
/* add ranges to worksheet */
|
||||
// ws['!cols'] = ['apple', 'banan'];
|
||||
ws['!merges'] = ranges;
|
||||
|
||||
/* add worksheet to workbook */
|
||||
wb.SheetNames.push(ws_name);
|
||||
wb.Sheets[ws_name] = ws;
|
||||
|
||||
var wbout = XLSX.write(wb, {
|
||||
bookType: 'xlsx',
|
||||
bookSST: false,
|
||||
type: 'binary'
|
||||
});
|
||||
|
||||
saveAs(new Blob([s2ab(wbout)], {
|
||||
type: "application/octet-stream"
|
||||
}), "test.xlsx")
|
||||
}
|
||||
|
||||
export function export_json_to_excel({
|
||||
header,
|
||||
data,
|
||||
filename,
|
||||
autoWidth = true,
|
||||
bookType= 'xlsx'
|
||||
} = {}) {
|
||||
/* original data */
|
||||
filename = filename || 'excel-list'
|
||||
data = [...data]
|
||||
data.unshift(header);
|
||||
var ws_name = "SheetJS";
|
||||
var wb = new Workbook(),
|
||||
ws = sheet_from_array_of_arrays(data);
|
||||
|
||||
if (autoWidth) {
|
||||
/*设置worksheet每列的最大宽度*/
|
||||
const colWidth = data.map(row => row.map(val => {
|
||||
/*先判断是否为null/undefined*/
|
||||
if (val == null) {
|
||||
return {
|
||||
'wch': 10
|
||||
};
|
||||
}
|
||||
/*再判断是否为中文*/
|
||||
else if (val.toString().charCodeAt(0) > 255) {
|
||||
return {
|
||||
'wch': val.toString().length * 2
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
'wch': val.toString().length
|
||||
};
|
||||
}
|
||||
}))
|
||||
/*以第一行为初始值*/
|
||||
let result = colWidth[0];
|
||||
for (let i = 1; i < colWidth.length; i++) {
|
||||
for (let j = 0; j < colWidth[i].length; j++) {
|
||||
if (result[j]['wch'] < colWidth[i][j]['wch']) {
|
||||
result[j]['wch'] = colWidth[i][j]['wch'];
|
||||
}
|
||||
}
|
||||
}
|
||||
ws['!cols'] = result;
|
||||
}
|
||||
|
||||
/* add worksheet to workbook */
|
||||
wb.SheetNames.push(ws_name);
|
||||
wb.Sheets[ws_name] = ws;
|
||||
|
||||
var wbout = XLSX.write(wb, {
|
||||
bookType: bookType,
|
||||
bookSST: false,
|
||||
type: 'binary'
|
||||
});
|
||||
saveAs(new Blob([s2ab(wbout)], {
|
||||
type: "application/octet-stream"
|
||||
}), `${filename}.${bookType}`);
|
||||
}
|
||||
120
ExportExcel/README.md
Normal file
120
ExportExcel/README.md
Normal file
@@ -0,0 +1,120 @@
|
||||
# 介绍
|
||||
|
||||
这是一个可以将页面中的表格数据导出为`Excel`文件的功能组件，该组件一般与表格一起使用，将表格数据传给组件，然后通过点击组件按钮可将表格中的数据导出成`Excel`文件。
|
||||
|
||||
# 使用方法
|
||||
|
||||
由于封装该组件内部引用了`xlsx.js`，`file-saver.js`和`elementUI`，因此在使用该组件时，请先安装如下依赖：
|
||||
|
||||
```shell
|
||||
npm install xlsx file-saver element-ui --save
|
||||
```
|
||||
|
||||
安装好依赖后，只需将该组件文件夹`ExportExcel`导入到现有项目中即可使用。
|
||||
|
||||
|
||||
# 使用示例
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div id="app">
|
||||
<export-excel v-if="list !== null" :list="list" :tHeader="tHeader" :tValue="tValue"></export-excel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ExportExcel from './ExportExcel'
|
||||
export default {
|
||||
name: 'app',
|
||||
components: { ExportExcel},
|
||||
data() {
|
||||
return {
|
||||
list:null,
|
||||
tHeader:['Id', '告警类型', '告警内容', '告警时间（段）', '告警次数'],
|
||||
tValue:['id', 'type', 'content', 'time', 'count'],
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
```
|
||||
|
||||
# 选项
|
||||
|
||||
| 属性 | 描述 | 类型 | 是否必须 |
|
||||
| :------: | :------------------: | :---: | :------: |
|
||||
| list | 由后端返回的表格数据 | Array | 是 |
|
||||
| tHeader | 导出的Excel文件表头标题 | Array | 是 |
|
||||
| tValue | 要将表格数据中的哪些字段作为数据导出至Excel，与表头一一对应 | Array | 是 |
|
||||
| filename | 导出的Excel文件名，默认为“导出数据.xlsx” | String | 否 |
|
||||
|
||||
# 选项说明
|
||||
|
||||
**关于选项中的`tHeader`和`tValue`说明如下：**
|
||||
|
||||
例如将如下表格数据导出成Exlcel：
|
||||
|
||||
|
||||
|
||||
其中表头数据为：
|
||||
|
||||
|
||||
|
||||
所以`tHeader`为：
|
||||
|
||||
```javascript
|
||||
tHeader:['Id', '告警类型', '告警内容', '告警时间（段）', '告警次数']
|
||||
```
|
||||
|
||||
后端返回的表格数据`list`为：
|
||||
|
||||
```json
|
||||
[
|
||||
{
|
||||
"id":1,
|
||||
"type":"",
|
||||
"content":"",
|
||||
"time":"",
|
||||
"count":"",
|
||||
},
|
||||
{
|
||||
"id":2,
|
||||
"type":"",
|
||||
"content":"",
|
||||
"time":"",
|
||||
"count":"",
|
||||
},
|
||||
//....
|
||||
]
|
||||
```
|
||||
|
||||
其中：
|
||||
|
||||
- list中的id------->表头的ID
|
||||
|
||||
- list中的type------->表头的'告警类型'
|
||||
|
||||
- list中的content------->表头的'告警内容'
|
||||
|
||||
- list中的time------->表头的'告警时间（段）'
|
||||
|
||||
- list中的count------->表头的'告警次数'
|
||||
|
||||
所有`tValue`为：
|
||||
|
||||
```javascript
|
||||
tValue:['id', 'type', 'content', 'time', 'count']
|
||||
```
|
||||
|
||||
|
||||
|
||||
# 效果图
|
||||
|
||||
|
||||
|
||||
|
||||
# 组件代码
|
||||
|
||||
完整代码请戳☞[Vue-Components-Library/ExportExcel](https://github.com/wangjiachen199366/Vue-Components-Library/tree/master/ExportExcel)
|
||||
|
||||
（完）
|
||||
58
ExportExcel/index.vue
Normal file
58
ExportExcel/index.vue
Normal file
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<el-button :loading="downloadLoading" type="primary" @click="handleDownload">导出 Excel</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'ExportExcel',
|
||||
props: {
|
||||
list: {
|
||||
required: true,
|
||||
type: Array
|
||||
},
|
||||
tHeader: {
|
||||
required: true,
|
||||
type: Array
|
||||
},
|
||||
tValue: {
|
||||
required: true,
|
||||
type: Array
|
||||
},
|
||||
filename: {
|
||||
type: String,
|
||||
default: '导出数据'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
downloadLoading: false,
|
||||
autoWidth: true,
|
||||
bookType: 'xlsx'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleDownload() {
|
||||
this.downloadLoading = true
|
||||
import('./Export2Excel').then(excel => {
|
||||
const data = this.formatJson(this.tValue, this.list)
|
||||
excel.export_json_to_excel({
|
||||
header: this.tHeader,
|
||||
data,
|
||||
filename: this.filename,
|
||||
autoWidth: this.autoWidth,
|
||||
bookType: this.bookType
|
||||
})
|
||||
this.downloadLoading = false
|
||||
})
|
||||
},
|
||||
formatJson(filterVal, jsonData) {
|
||||
return jsonData.map(v => filterVal.map(j => {
|
||||
return v[j]
|
||||
}))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user