el-table实现纯前端导出(适用于el-table任意表格)

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.按需引入

<template><div><el-table  id='table'>//形式一<el-table-column><template><span>可以用插槽形式</span></template></el-table-column>//形式二<el-table-column lable=可以用这种形式' prop='xxx'/>//形式三(不可用)<el-table-column><template><el-input  v-model=''/>//该方式无法识别到</template></el-table-column></el-table>//给表格一个id<el-button @click='demo'>导出</el-button></div>
</template><script>
import { exportToExcel } from '@/Export2Excel'export default{data(){return{}},methods:{demo(){exportToExcel('#table', '导出名称')//id选择器,导出名称,调用这个方法就可以了}}
}
</script>

效果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/93930.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

el-date-picker自定义只能选中当前月份和半年内月份等

需求&#xff1a;el-date-picker只能选中当前月期和当前月期往前半年&#xff0c;其他时间就禁用了不让选择了&#xff0c;因为没数据哈哈。当然也可以选择往前一年等。 一、效果 二、写个日期选择器 :picker-options&#xff1a;日期选项 value-format&#xff1a;选择后的格…

Python数据分析案例30——中国高票房电影分析(爬虫获取数据及分析可视化全流程)

案例背景 最近总看到《消失的她》票房多少多少&#xff0c;《孤注一掷》票房又破了多少多少..... 于是我就想自己爬虫一下获取中国高票房的电影数据&#xff0c;然后分析一下。 数据来源于淘票票&#xff1a;影片总票房排行榜 (maoyan.com) 爬它就行。 代码实现 首先爬虫获…

【CSS】CSS 特性 ( CSS 优先级 | 优先级引入 | 选择器基本权重 )

一、CSS 优先级 1、优先级引入 定义 CSS 样式时 , 可能出现 多个 类型相同的 规则 定义在 同一个元素上 , 如果 CSS 选择器 相同 , 执行 CSS 层叠性 , 根据 就近原则 选择执行的样式 , 如 : 出现两个 div 标签选择器 , 都设置 color 文本颜色 ; <style>div {color: re…

react17:生命周期函数

挂载时更新时 setState触发更新、父组件重新渲染时触发更新forceUpdate触发更新卸载时 react&#xff08;v17.0.2&#xff09;的生命周期图谱如下。 相较于16版本&#xff0c;17版本生命周期函数有如下变化&#xff1a; componentWillMount() componentWillUpdate() compone…

无涯教程-Android - Frame Layout函数

Frame Layout 旨在遮挡屏幕上的某个区域以显示单个项目&#xff0c;通常&#xff0c;应使用FrameLayout来保存单个子视图&#xff0c;因为在子视图彼此不重叠的情况下&#xff0c;难以以可扩展到不同屏幕尺寸的方式组织子视图。 不过&#xff0c;您可以使用android:layout_grav…

Mybatis学习|基本的crud、数据库字段与对照类字段不一致问题

1.查询&#xff1a;根据id去查用户 在Dao层的UserMapper接口中增加根据id查用户的方法&#xff0c;定义方法名、传的参数以及返回值 在与UserMapper接口绑定的UserMapper.xml中配置该方法对应的sql语句 编写测试用例 2.增加&#xff1a;插入一个新用户 在Dao层的UserMapper接…

统一使用某一个包管理工具,比如yarn pnpm

原因&#xff1a;前端每个人的习性不一样&#xff0c;有人用npm 有人用yarn等包管理工具&#xff0c;混合下载插件容易出bug&#xff0c;就用个小工具锁住就行了&#xff0c;只能使用yarn或者pnpm反向下载依赖和下载插件。不然就报错 1.在项目主目录下创建preinstall.js // 如…

关于两个不同数据库的两张表建立数据库链接,关联查询数据

一、数据库链接 数据库链接&#xff08;database link&#xff09;是用于跨不同数据库之间进行连接和数据传输的工具或方法。它允许在一个数据库中访问另一个数据库中的对象和数据。 二、具体操作 以Oracle数据库为例 --1.建立链接tjpt CREATE DATABASE LINK tjpt CONNECT…

vscode远程调试PHP代码

目录 一、VScode配置 1.1安装vscode里面的两个扩展 1.2安装对应PHP版本的xdebug 二、ssh连接和xdebug配置 2.1ssh连接 2.2xdebug配置 三、xdebug调试&#xff0c;访问 一、VScode配置 1.1安装vscode里面的两个扩展 1.2安装对应PHP版本的xdebug 去xdebug官方&#xff0c…

机器学习:无监督学习

文章目录 线性学习方法聚类ClusteringKmeansHAC 分布表示降维PCAMatrix FactorizationManifold LearningLLELaplacian Eigenmapst-SEN 线性学习方法 聚类Clustering Kmeans 随机选取K个中心&#xff0c;然后计算每个点与中心的距离&#xff0c;找最近的&#xff0c;然后更新中…

Flutter开发- iOS 问题CocoaPods not installed or not in valid state

解决问题方案&#xff1a; 1、先检查本机CocoaPods是否安装&#xff0c;通过gem list 查看是否安装 打开终端&#xff0c;执行gem list&#xff0c;出现图中的数据即为已安装。未安装看第4 步 2、已经安装了CocoaPods&#xff0c;还出现了图中的提示&#xff0c;你可能已经猜…

Springboot整合logback多节点日志文件加端口号区分

描述&#xff1a;正常情况下&#xff1a;在Springboot 项目的resources目录下创建一个logback-spring.xml的日志配置文件&#xff0c;简单配置如下&#xff1a; <?xml version"1.0" encoding"UTF-8"?><configuration debug"false"&g…