自响应式网站建设清单,wordpress域名+文件,青岛广告公司,找长期合作加工2023.9.1今天我学习了如何使用el-table实现前端的导出功能#xff0c;该方法的好处有无论你的el-table长什么样子#xff0c;导出之后就是什么样子。
1.安装三个插件 npm install file-save npm install xlsx npm install xlx-style 2.创建Export2Excel.js
// 根据dom导出表…2023.9.1今天我学习了如何使用el-table实现前端的导出功能该方法的好处有无论你的el-table长什么样子导出之后就是什么样子。
1.安装三个插件 npm install file-save npm install xlsx npm install xlx-style 2.创建Export2Excel.js
// 根据dom导出表格
import { saveAs } from file-saver
import * as XLSX from xlsx
import * as XLSXStyle from xlsx-style;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 exportToExcel(idSelector, fileName, titleNum 1) {// 设置导出的内容是否只做解析不进行格式转换 false要解析 true:不解析const xlsxParam { raw: true }let table document.querySelector(idSelector).cloneNode(true)// 因为element-ui的表格的fixed属性导致多出一个table会下载重复内容这里删除掉if (table.querySelector(.el-table__fixed-right)) {table.removeChild(table.querySelector(.el-table__fixed-right))}if (table.querySelector(.el-table__fixed)) {table.removeChild(table.querySelector(.el-table__fixed))}const wb XLSX.utils.table_to_book(table, xlsxParam)let range XLSX.utils.decode_range(wb.Sheets[Sheet1][!ref])let cWidth []for (let C range.s.c; C range.e.c; C) { //SHEET列let len 100 //默认列宽let len_max 400 //最大列宽for (let R range.s.r; R range.e.r; R) { //SHEET行let cell { c: C, r: R } //二维 列行确定一个单元格let cell_ref XLSX.utils.encode_cell(cell) //单元格 A1、A2if (wb.Sheets[Sheet1][cell_ref]) {// if (R 0){if (R titleNum) {wb.Sheets[Sheet1][cell_ref].s { //设置第一行单元格的样式 stylealignment: {horizontal: center,vertical: center}}} else {wb.Sheets[Sheet1][cell_ref].s {alignment: {horizontal: center,vertical: center}}}//动态自适应计算列宽let va JSON.parse(JSON.stringify(wb.Sheets[Sheet1][cell_ref].v))var card1 JSON.parse(JSON.stringify(va)).match(/[\u4e00-\u9fa5]/g) //匹配中文var card11 if (card1) {card11 card1.join()}var card2 JSON.parse(JSON.stringify(va)).replace(/([^\u0000-\u00FF])/g, ) //剔除中文let st 0if (card11) {// st card11.length * 16 //中文字节码长度st card11.length * 20 //中文字节码长度}if (card2) {// st card2.length * 8 //非中文字节码长度st card2.length * 10 //非中文字节码长度}if (st len) {len st}}}if (len len_max) {//最大宽度len len_max}cWidth.push({ wpx: len }) //列宽}wb.Sheets[Sheet1][!cols] cWidthconst wbout XLSXStyle.write(wb, { bookType: xlsx, bookSST: false, type: binary })try {saveAs(new Blob([s2ab(wbout)], { type: }), ${fileName}.xlsx)} catch (e) {if (typeof console ! undefined) {console.log(e, wbout)}}return wbout
}3.按需引入
templatedivel-table idtable//形式一el-table-columntemplatespan可以用插槽形式/span/template/el-table-column//形式二el-table-column lable可以用这种形式 propxxx///形式三不可用el-table-columntemplateel-input v-model///该方式无法识别到/template/el-table-column/el-table//给表格一个idel-button clickdemo导出/el-button/div
/templatescript
import { exportToExcel } from /Export2Excelexport default{data(){return{}},methods:{demo(){exportToExcel(#table, 导出名称)//id选择器,导出名称,调用这个方法就可以了}}
}
/script
效果
