VUE纯前端导出
前端excel导出
<el-col :span="4" >
<el-button type="primary" @click="exportToExcel">导出</el-button>
</el-col>
<el-table
:data="sortedAndPaginatedVerificationTableData"
stripe
border
ref="tableRef"
@sort-change="handleSortChange"
>
<el-table-column prop="age" label="年龄" width="150" sortable>
</el-table-column>
<el-table-column prop="status" label="状态" width="120" sortable>
</el-table-column>
<el-table-column
prop="message"
label="信息"
sortable
>
</el-table-column>
</el-table>
导出方式一
//导出Excel
exportToExcel(){
//第一种方式
// 获取表格内容
const excelContent = this.$refs.tableRef.$el.innerHTML;
// 处理表头，确保没有额外的空白单元格
const headerElement = document.createElement('div');
headerElement.innerHTML = excelContent;
const headerCells = headerElement.querySelectorAll('th');
// 移除最后一个空单元格
if (headerCells.length > 0) {
const lastCell = headerCells[headerCells.length - 1];
lastCell.parentNode.removeChild(lastCell);
}
// 构建 Excel 文件内容
let excelFile = `
<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]-->
<style>
td{border: .5pt solid;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
${headerElement.innerHTML}
</body>
</html>
`;
// 创建 Blob 对象
const blob = new Blob([excelFile], { type: 'application/vnd.ms-excel' });
// 创建链接并触发下载
const link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = '表格.xlsx'; // 设置默认文件名
link.style.display = "none";
document.body.appendChild(link);
link.click();
window.URL.revokeObjectURL(link.href);
document.body.removeChild(link);
}
导出方式2
//导出Excel
exportToExcel(){
//第二种方式
// 获取表格数据
const tableData = this.tableData;
// 构建 Excel 文件内容
let excelContent = `<html><head><meta charset="UTF-8"></head><body><table border="1">`;
// 添加表头
excelContent += '<tr>';
for (const column of this.$refs.tableRef.columns) {
if (column.property) {
excelContent += `<th>${column.label}</th>`;
}
}
excelContent += '</tr>';
//如要添加多级表头则复制几个tr几即可使用
//rowspan用于合并多个行的单元格。
// colspan用于合并多个列的单元格。
// 添加表格数据
for (const row of tableData) {
excelContent += '<tr>';
for (const column of this.$refs.tableRef.columns) {
if (column.property) {
excelContent += `<td>${row[column.property]}</td>`;
}
}
excelContent += '</tr>';
}
// 构建完整的 Excel 文件内容
excelContent += '</table></body></html>';
// 创建 Blob 对象
const blob = new Blob([excelContent], { type: 'application/vnd.ms-excel' });
// 创建链接并触发下载
const link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = '表格.xlsx'; // 设置默认文件名
link.style.display = "none";
document.body.appendChild(link);
link.click();
window.URL.revokeObjectURL(link.href);
}
这里tableData是表格的原始数据，如果前端已经获取到表格的所有数据，就可以对整个数据进行导出，也就是推荐第二种方式，第一种方式可以对表格样式进行控制，但是数据是考虑当前页面的表格数据，也就是本页数据的导出，所以后来我摒弃了第一种方式，直接使用的第二种方式。
第二种方式的好处：
- 首先，它获取表格数据并遍历每一行，以构建 Excel 文件内容。
- 在构建表头时，它遍历了表格的列属性，以获取每一列的标签（label），并添加到表头中，不用控制表格过滤空白单元格，这是第一种的弊端。
导出为cvs
let csvContent = "data:text/csv;charset=utf-8,";
csvContent += "年龄,状态,信息\n"; // 添加表头
// 添加数据行
this.verificationTableData.forEach(row => {
let csvRow = [];
csvRow.push(row.age);
csvRow.push(row.status);
csvRow.push(row.message);
csvContent += csvRow.join(",") + "\n";
});
// 创建下载链接
const encodedUri = encodeURI(csvContent);
const link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "data.csv");
document.body.appendChild(link);
// 触发点击下载
link.click();
document.body.removeChild(link);
前端导出excel 分多个sheet页
/**
*
* @param {*} jsonDataArray 二维数组 数据
* @param {*} headerArray 二维数组 表头
* @param {*} sheetNameArray 数组 每个sheet页的名称
* @param {*} info excel名称的前缀
* @returns
*/
import * as XLSX from 'xlsx/xlsx.mjs';
export default function exportByExcel(jsonDataArray, headerArray, sheetNameArray, info) {
let time = new Date();
let year = time.getFullYear();
let month = time.getMonth() + 1;
let day = time.getDate();
let hour = time.getHours();
let min = time.getMinutes();
let s = time.getSeconds();
month = month > 10 ? month : '0' + month;
day = day > 10 ? day : '0' + day;
hour = hour > 10 ? hour : '0' + hour;
min = min > 10 ? min : '0' + min;
s = s > 10 ? s : '0' + s;
let name = year + '' + month + '' + day + '' + hour + '' + min + '' + s;
const workbook = XLSX.utils.book_new();
jsonDataArray.forEach((jsonData, index) => {
let arrAll = [];
jsonData.forEach((item) => {
let arr = [];
headerArray[index].forEach((item1) => {
let singleData = '';
for (let i in item) {
if (item1 === i) {
singleData = item[item1];
}
}
arr.push(singleData);
});
arrAll.push(arr);
});
const worksheetName = sheetNameArray[index];
const worksheetData = [headerArray[index], ...arrAll];
const worksheet = XLSX.utils.aoa_to_sheet(worksheetData);
XLSX.utils.book_append_sheet(workbook, worksheet, worksheetName);
});
XLSX.writeFile(workbook, info + '_' + name + '.xlsx');
};
<script>
import exportByExcel from "../utils/exportByExcel"
import { ElMessage } from 'element-plus'
export default {
name: 'HomeView',
data() {
return {
tableData: [],
tableData2: [],
dataHeaders: [
["a", "b", "c", "d", "e", "f"],
["a", "b", "c", "d", "e", "f"],
],
list1: [],
list2: []
}
},
methods: {
onSuccess(response, uploadFile, uploadFiles) {
console.log(response, uploadFile, uploadFiles)
},
onError(error, uploadFile, uploadFiles) {
ElMessage({
message: error,
type: 'error',
})
},
exportBtn() {
this.tableData.forEach((item) => {
this.list1.push({
"a": item.a,
"b": item.b,
"c": item.c,
"d": item.d,
"e": item.e,
"f": item.f,
})
})
this.tableData2.forEach((item) => {
this.list2.push({
"a": item.a,
"b": item.b,
"c": item.c,
"d": item.d,
"e": item.e,
"f": item.f,
})
})
let jsonDataArray = [this.list1, this.list2]
let sheetNameArray = ["sheetName1", " sheetName2",]
let info = "导出"
exportByExcel(jsonDataArray, this.dataHeaders, sheetNameArray, info)
}
}
}
</script>
Element table 导出Excel重复数据
exportToExcel(){
let fix = document.querySelector('.el-table__fixed');
let wb;
if(fix){ //判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去
wb = XLSX.utils.table_to_book(document.querySelector('#lyTable').removeChild(fix));
document.querySelector('#lyTable').appendChild(fix);
}else{
wb = XLSX.utils.table_to_book(document.querySelector('#lyTable'));
}
let wbout = XLSX.write(wb, { bookType: 'xls', bookSST: true, type: 'array' })
try {
saveAs(new Blob([wbout], { type: 'application/octet-stream' }), ' 重点日跟踪环保设施用电量情况表.xlsx');
} catch (e) {
if (typeof console !== 'undefined') console.log(e, wbout)
}
return wbout
},
<el-table
highlight-current-row
show-body-overflow
virtual-scroll
ref="dataTabletO"
id="lyTable"
row-height="25"
:span-method="spanMethod"
border
size="mini"
:data="dataTable"
style="width: 100%"
max-height="500px"
:header-cell-style="{
'text-align': 'center',
'color': 'white',
'height': '8',
'fontsize': '1.8rem'
}"
:cell-class-name="addTableRowAndColClass">
<el-table-column type="index" prop="xh" width="50" label="序号" fixed></el-table-column>
<el-table-column prop="DUTY_DEPT" label="责任部门" :show-overflow-tooltip="true" width="90" fixed></el-table-column>
<el-table-column prop="EQPT_NAME" label="设备名称" :show-overflow-tooltip="true" width="200" fixed></el-table-column>
<el-table-column prop="IND_NAME" label="对标指标名称" :show-overflow-tooltip="true" width="120" fixed></el-table-column>
<el-table-column prop="UINT" label="单位" :show-overflow-tooltip="true" width="90" fixed></el-table-column>
</el-table>