vue使用file-saver本地文件导出功能
作者:前端辣白菜 发布时间:2023-07-02 16:59:26
标签:vue,file-saver,文件,导出
1:安装xlsx和file-saver
npm install file-saver xlsx --save
2:创建localExports.js文件
3:直接上代码
import XLSX from 'xlsx';
const FileSaver = require('file-saver');
import { getRandomNum } from '@/utils';
// 本地导出表格
/**
* 导出Excel文件
* @param {*} elementName table组件id名称
* @param {*} fileName 文件名
* @description 使用说明
* import { exportsXlsx } from '@/utils/localExports';
* exportsXlsx('idName', '文件名称');
*/
export function exportsXlsx(elementName, fileName) {
const time = new Date().getTime();
const random = getRandomNum(100, 1000);
const wb = XLSX.utils.table_to_book(clearHead(elementName), { raw: true });
const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), `${fileName}${time}-${random}.xlsx`);
}
function clearHead(elementName) {
const tableDom = document.querySelector('#' + elementName).cloneNode(true);
const tableHeader = tableDom.querySelector('.el-table__header-wrapper');
const tableBody = tableDom.querySelector('.el-table__body');
tableHeader.childNodes[0].append(tableBody.childNodes[1]);
const headerDom = tableHeader.childNodes[0].querySelectorAll('th');
// 移除左侧checkbox的节点
if (headerDom[0].querySelectorAll('.el-checkbox')) {
headerDom[0].remove();
}
for (const key in headerDom) {
if (headerDom[key].innerText === '操作') {
headerDom[key].remove();
}
}
// 清理掉checkbox 和操作的button
const tableList = tableHeader.childNodes[0].childNodes[2].querySelectorAll('td');
for (let key = 0; key < tableList.length; key++) {
if (tableList[key].querySelectorAll('.el-checkbox').length > 0 || tableList[key].querySelectorAll('.el-button').length > 0) {
tableList[key].remove();
}
}
return tableHeader;
}
4:使用方式
<el-table
id="good"
v-loading="listLoading"
:header-cell-style="{ background: '#FAFAFA', color: '#212532' }"
:data="list"
tooltip-effect="dark"
style="width: 100%"
height="566"
border
@selection-change="handleSelectionChange"
>
import { exportsXlsx } from '@/utils/localExports';
methods:{
onSearch() {
exportsXlsx('good', '模拟数据');
},
}
5:good为table组件的id,getRamdomNum方法如下
// 生成随机数
export function getRandomNum(Min, Max) {
var Range = Max - Min;
var Rand = Math.random();
return (Min + Math.round(Rand * Range));
}
来源:https://blog.csdn.net/weixin_42484657/article/details/122321802
0
投稿
猜你喜欢
- 接着上一篇学习:https://www.jb51.net/article/70528.htm七、MySQL数据库Schema设计的性能优化高
- 操作系统会为每一个创建的进程分配一个独立的地址空间,不同进程的地址空间是完全隔离的,因此如果不加其他的措施,他们完全感觉不到彼此的存在。那么
- struts2.3.24 + spring4.1.6 + hibernate4.3.11+ mysql5.5.25开发环境搭建及相关说明。
- php有哪些优点?PHP优点:1.入门快,有其它语言基础的程序员二周左右的时间就可以入门,一个月左右的时间基本上就可以开发简单的项目了。2.
- 前言本文主要给大家介绍了关于python中Numpy和Pandas使用的相关资料,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介
- 本文实例讲述了php 多个变量指向同一个引用($b = &$a)用法。分享给大家供大家参考,具体如下:引用是什么? 引用就是多个变量
- 这是个郁闷的问题。主级获得ID列表 select ID from FS_SD_Address where PID=0
- Postman生成okhttp代码依赖<dependency>  
- 一、前言写这篇文章的灵感来源于我玩游戏的时候(为了避免过不了审就不说是啥游戏了),看见一个大佬在游戏里面建造了“还原方阵
- 本文仅作为基本操作流程的记录,不进行细节描述一、环境安装1、安装Pycharm在官网上下载最新版本Pycharm安装即可2、安装pyQT5p
- 方法一: 在给出的输入CD-KEY(序列号)的界面中,输入你已经安装的windows server 2003 的CD-KEY(序列号)即可以
- 本文实例讲述了python实现根据窗口标题调用窗口的方法。分享给大家供大家参考。具体分析如下:当你知道一个windows窗口的标题后,可以用
- 前两天在做一个站内版的企搜引擎,发现某些站点可以链接站点内容。。奇怪之下看了看,原来是按照数据库ID的自动编号规律进行链接的~~闲暇之余弄了
- 如果你还在为python的各种urllib和urlibs,cookielib 头疼,或者还还在为python模拟登录和抓取数据而抓狂,那么来
- eval 是干嘛的?解析字符串表达式并执行,并返回一个值语法格式eval(expression[, globals[, locals]])
- 这次主要是爬了京东上一双鞋的相关评论:将数据保存到excel中并可视化展示相应的信息主要的python代码如下:文件1#将excel中的数据
- 在进行网页抓取的时候,分析定位html节点是获取抓取信息的关键,目前我用的是lxml模块(用来分析XML文档结构的,当然也能分析html结构
- 本文实例讲述了Python3实现的Mysql数据库操作封装类。分享给大家供大家参考,具体如下:#encoding:utf-8#name:mo
- 关于元组,上一讲中涉及到了这个名词。本讲完整地讲述它。先看一个例子:>>>#变量引用str>>> s =
- 一、 腐蚀与膨胀1.1 腐蚀操作import cv2import numpy as npimg = cv2.imread('Data