Vue xlsx插件前端导出

一、安装 xlsx

npm install --save xlsx file-saver

二、具体使用整体代码

如果数据格式是这样就用下面的,直接把数据传到 XLSX.utils.json_to_sheet

list: [
{ name: 'John', age: 25 },
{ name: 'Jane', age: 30 },
// ...
]
<template><button @click="exportData">导出数据</button>
</template>

import * as XLSX from 'xlsx'methods: {// 导出当前界面列表exportData() {const data = [{"事假": "0.0/5.0","护理假": "0.0/0.0","婚假": "0.0/5.0","申请人":"张三"},{"事假": "0.0/5.0","护理假": "0.0/0.0","婚假": "0.0/5.0","申请人":"李四"}];const dataTitles = ['申请人', '事假', '婚假', '护理假'];const rows = [];for (const item of data) {const entry = {};for (const title of dataTitles) {if (Object.prototype.hasOwnProperty.call(item, title)) {entry[title] = item[title];} else {entry[title] = '';}}rows.push(entry);}const worksheet = XLSX.utils.json_to_sheet(rows)const workbook = XLSX.utils.book_new()XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')const fileBuffer = XLSX.write(workbook, { type: 'buffer', bookType: 'xlsx' })this.saveFile(fileBuffer, 'data.xlsx')},// 保存数据并且导出saveFile(buffer, fileName) {const blob = new Blob([buffer], { type: 'application/octet-stream' })const link = document.createElement('a')link.href = URL.createObjectURL(blob)link.download = fileNamelink.click()}}

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

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

相关文章

RCU初学参考资料

参考资料&#xff1a; 1.预备知识&#xff1a;QSBR算法 b-tree-QSBR简介 QSBR是通过quiescent state来检测grace period。如果线程T在某时刻不再持有共享对象的引用&#xff0c;那么该线程T在此时就处于quiescent state。如果一个时间区间内&#xff0c;所有线程都曾处于quie…

kubectl详解

陈述式资源管理方法&#xff1a; 1.kubernetes 集群管理集群资源的唯一入口是通过相应的方法调用 apiserver 的接口 2.kubectl 是官方的CLI命令行工具&#xff0c;用于与 apiserver 进行通信&#xff0c;将用户在命令行输入的命令&#xff0c;组织并转化为 apiserver 能识别的信…

LabVIEW开发双目立体系统猪重估算

LabVIEW开发双目立体系统猪重估算 动物的活重是各种研究中的重要参考&#xff0c;例如动物生长&#xff0c;饲料转化率&#xff0c;健康状况和疾病发生。生长中的动物的体重为保持它们处于适当的营养和环境水平提供了一个有价值的参数或指标。动物的利润通常与收入和成本之间的…

LCD驱动程序——Framebuffer应用编程

1.LCD 操作原理 在 Linux 系统中通过 Framebuffer 驱动程序来控制 LCD。Frame 是帧的意思&#xff0c;buffer 是缓冲的意思&#xff0c;这意味着 Framebuffer 就是一块内存&#xff0c;里面保存着一帧图像。Framebuffer 中保存着一帧图像的每一个像素颜色值&#xff0c;假设 L…

程序环境和预处理

目录 1. 程序的翻译环境和执行环境 2. C语言程序的编译链接 2.1. 预处理 2.2. 编译 2.3. 汇编 2.4. 链接 3. 运行环境的简单介绍 4. 预定义符号介绍 5. 预处理指令 #define 5.1. #define定义标识符 5.2. #define定义宏 5.3. #define替换规则 6. 宏和函数的对比 1. …

由k8s升级慢引起的etcd性能不足的问题排查

一、基本介绍 最近etcd查看出现性能 curl --cacert /path/to/etcdctl-ca.crt --cert /path/to/etcdctl.crt --key /path/to/etcdctl.key https://:2379/metrics | grep etcd_disk_wal_fsync_duration_seconds_bucket 当集群规模突破过大时规模时,曾出现如下性能瓶颈问题: etc…

Vue 的异步组件

目录 1&#xff0c;异步组件介绍2&#xff0c;路由中使用3&#xff0c;组件中使用3.1&#xff0c;Vue2 语法3.2&#xff0c;Vue3 语法 1&#xff0c;异步组件介绍 在项目中&#xff0c;有的组件仅在需要时才会加载&#xff0c;这时就需要用到异步组件。 异步组件本质上是一个…

带你从0开始学习自动化框架Airtest

现在市面上做UI自动化的框架很多&#xff0c;包括我们常用的Web自动化框架Selenium&#xff0c;移动端自动化框架Appium。 虽然Selenium和Appium分属同源&#xff0c;而且API都有很多相同的地方&#xff0c;可以无损耗切换&#xff0c;但是还是需要引入不同的库&#xff0c;而…

Debug技巧-不启用前端访问后端

在日常开发中&#xff0c;我们经常会遇到各种问题需要调试&#xff0c;前后端都启动需要耗费一定的时间和内存&#xff0c;方便起见&#xff0c;可以直接用抓包数据访问后端&#xff0c;这里我们需要用到Postman或者ApiFox 抓包数据 在系统前台触发后端请求&#xff0c;在控制…

【MATLAB第81期】基于MATLAB的LSTM长短期记忆网络预测模型时间滞后解决思路(更新中)

【MATLAB第81期】基于MATLAB的LSTM长短期记忆网络预测模型时间滞后解决思路&#xff08;更新中&#xff09; 在LSTM预测过程中&#xff0c;极易出现时间滞后&#xff0c;类似于下图&#xff0c;与一个以上的样本点结果错位&#xff0c;产生滞后的效果。 在建模过程中&#xf…

ChatGPT更新多模态,支持图片和语音输入,会带来哪些新体验和影响?

不仅是光使用chat GPT更方便、更厉害&#xff0c;哪些和chat GPT结合技术的技术和产品能力也变得更强 像我们公司目前在用的RPA&#xff0c;就努力和这个chat GPT的技术结合&#xff0c;但是由于能力有限&#xff0c;使用的场景少之又少 但这次Chat GPT的更新&#xff0c;预计…

负载均衡深度解析:算法、策略与Nginx实践

引言 如今&#xff0c;网站和应用服务面临着巨大的访问流量&#xff0c;如何高效、稳定地处理这些流量成为了一个亟待解决的问题。负载均衡技术因此应运而生&#xff0c;它通过将流量合理分配到多个服务器上&#xff0c;不仅优化了资源的利用率&#xff0c;还大大提升了系统的…

服务器数据恢复—EMC存储pool上数据卷被误删的数据恢复案例

服务器数据恢复环境&#xff1a; EMC Unity某型号存储&#xff0c;连接了2台硬盘柜。2台硬盘柜上创建2组互相独立的POOL&#xff0c;2组POOL共有21块520字节硬盘。21块硬盘组建了2组RAID6&#xff0c;1号RAID6有11块硬盘. 2号RAID6有10块硬盘。 服务器故障&检测&#xff1…

[ACTF2023]复现

MDH 源题&#xff1a; from hashlib import sha256 from secret import flagr 128 c 96 p 308955606868885551120230861462612873078105583047156930179459717798715109629 Fp GF(p)def gen():a1 random_matrix(Fp, r, c)a2 random_matrix(Fp, r, c)A a1 * a2.Treturn…

Vue入门——核心知识点

简介 Vue是一套用于构建用户界面的渐进式JS框架。 构建用户界面&#xff1a;就是将后端返回来的数据以不同的形式(例如&#xff1a;列表、按钮等)显示在界面上。渐进式&#xff1a;就是可以按需加载各种库。简单的应用只需要一个核心库即可&#xff0c;复杂的应用可以按照需求…

AR的光学原理?

AR智能眼镜的光学成像系统 AR眼镜的光学成像系统由微型显示屏和光学镜片组成&#xff0c;可以将其理解为智能手机的屏幕。 增强现实&#xff0c;从本质上说&#xff0c;是将设备生成的影像与现实世界进行叠加融合。这种技术基本就是通过光学镜片组件对微型显示屏幕发出的光线…

[Machine Learning][Part 7]神经网络的基本组成结构

这里我们将探索神经元/单元和层的内部工作原理。特别是,与之前学习的回归/线性模型和逻辑模型进行比较。最后接介绍tensorflow以及如何利用tensorflow来实现这些模型。 神经网络和大脑的神经元工作原理类似&#xff0c;但是比大脑的工作原理要简单的多。大脑中神经元的工作原理…

python自动化测试(九):EcShop添加商品功能

前置条件&#xff1a; 本地部署&#xff1a;ECShop的版本是3.0.0、Google版本是 Google Chrome65.0.3325.162 (正式版本) &#xff08;32 位&#xff09; py的selenium版本是3.11.0 目录 一、前置代码 二、添加商品操作 2.1 点击添加商品 2.2 添加名称、分类、品牌 2…

Android sqlite分页上传离线订单后删除

1、判断订单表的的总数是否大于0&#xff0c;如果大于0开始上传订单 public int getOrderCount() {String query "SELECT COUNT(*) FROM " TABLE_NAME;Cursor cursor db.rawQuery(query, null);int count 0;if (cursor.moveToFirst()) {count cursor.getInt(0);…

flask 实践

flask框架研究&#xff1a; https://blog.csdn.net/shifengboy/article/details/114274271 https://blog.csdn.net/weixin_67531112/article/details/128256170 实现下载文件功能 vim test.py import io from flask import Flask, send_fileapp Flask(__name__) app.route(/…