vue 或 js 实现 excel表格的导出(笔记)
主要使用了插件 js-xlsx
官方 github：https://github.com/SheetJS/js-xlsx
参考博客 小茗同学的博客园 https://www.cnblogs.com/liuxianan/p/js-excel.html
使用方式 参考 小茗同学的博客园的demo（直接去小茗同学的博客园查看介绍更详细）
vue 则需要安装插件
我的是"xlsx": "^0.16.3"版本
安装
npm install xlsx
导入
import XLSX from "xlsx";
使用参考 代码要自己改一下
// 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载sheet2blob(sheet, sheetName) {sheetName = sheetName || "sheet1";var workbook = {SheetNames: [sheetName],Sheets: {}};workbook.Sheets[sheetName] = sheet;// 生成excel的配置项var wopts = {// bookType: "xlsx", // 要生成的文件类型// bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性// type: "binary",bookType: "xlsx",bookSST: true,type: "binary",defaultCellStyle: this.defaultCellStyle,cellStyles: true};var wbout = XLSX.write(workbook, wopts);var blob = new Blob([s2ab(wbout)], { type: "application/octet-stream" });// 字符串转ArrayBufferfunction 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;}return blob;},/*** 通用的打开下载对话框方法，没有测试过具体兼容性* @param url 下载地址，也可以是一个blob对象，必选* @param saveName 保存文件名，可选*/openDownloadDialog(url, saveName) {if (typeof url == "object" && url instanceof Blob) {url = URL.createObjectURL(url); // 创建blob地址}var aLink = document.createElement("a");aLink.href = url;aLink.download = saveName || ""; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效var event;if (window.MouseEvent) event = new MouseEvent("click");else {event = document.createEvent("MouseEvents");event.initMouseEvent("click",true,false,window,0,0,0,0,0,false,false,false,false,0,null);}aLink.dispatchEvent(event);},// 点击导出exportSpecialExcel() {// var data = [// ["主要信息", null, null, "其它信息"], // 特别注意合并的地方后面预留2个null// ["姓名", "性别", "年龄", "注册时间"],// ["张三", "男", 18, new Date()],// ["李四", "女", 22, new Date()]// ];let xlsxName;if (this.deptLevel == 4) {xlsxName = "大网格工作量统计分析";} else if (this.deptLevel == 5) {xlsxName = "中网格工作量统计分析";} else if (this.deptLevel == 6) {xlsxName = "小网格工作量统计分析";}let data = [];data.push([xlsxName]);let time =this.$moment(parseInt(this.TablePlanTime)).format("YYYY-MM-DD") +"至" +this.$moment(parseInt(this.TableDeadline)).format("YYYY-MM-DD");data.push(["统计单位：", this.statUnit],["统计人：", this.statUser],["统计日期：", this.nowTime],["统计期间：", time]);let tableHeader = ["序号","网格员名称",// null,"所属网格","任务总数"];this.deptLevel <= 5 ? "" : tableHeader.push("巡检"),this.deptLevel != 6 ? tableHeader.push("抽检") : "",(tableHeader = tableHeader.concat(["合格", "联合执法", "过期"]));data.push(tableHeader);if (this.tableData.length) {this.tableData.forEach((item, index) => {let listArr = [index + 1,item.userName,item.deptName,item.allNumber];this.deptLevel <= 5 ? "" : listArr.push(item.oneNumber),this.deptLevel != 6 ? listArr.push(item.twoNumber) : "",(listArr = listArr.concat([item.threeNumber,item.fourNumber,item.fiveNumber]));console.log("listArr", listArr);data.push(Object.values(listArr));});data[data.length - 1][0] = "合计";}console.error("this.tableData", this.tableData);var sheet = XLSX.utils.aoa_to_sheet(data);sheet["!merges"] = [// 设置A1-J1的单元格合并{s: { r: 0, c: 0 },e: { r: 0, c: 9 }}];sheet["!rows"] = [// 设置第一行表格高度{ hpx: 50 }];sheet["!cols"] = [// 设置每一列的宽度{ wpx: 60 },{ wpx: 100 },{ wpx: 200 },{ wpx: 50 },{ wpx: 50 }];this.openDownloadDialog(this.sheet2blob(sheet), xlsxName + ".xlsx");},vue 或 js 实现 excel表格的导出(笔记)相关推荐
- Java EXCEL 表格导入导出(带下拉选-带VLOOKUP函数封装)
Java EXCEL 表格导入导出(带下拉选-带VLOOKUP函数封装) 对于excel Java POI 使用 目前简单导出导入功能网上很多,但是对于有下拉选,样式等缺点却是最大硬伤,故此封装一个通 ...
- 工作系列Java开发之利用Java实现ERP系统中Excel表格的导出
工欲善其事必先利其器 前言: 最好的学习方式就是分享,喜欢就三连一下吧(关注,转发,点赞). 今天的内容开始之前,我先申明一下,今天的知识很重要! 很重要! 很重要 ,Excel表格的导出在正式步入公 ...
- js建立excel表格_建立Excel足球联赛表格传统方法与动态数组
js建立excel表格 介绍 (Introduction) I am going to show you the different ways you can build a football lea ...
- access调整行高和列宽_《excel表格怎么调整行高和列宽》 EXCEL 表格如何导出至WORD 格式...
EXCEL 表格如何导出至WORD 格式 1.演示使用的软件为word文字处理软件,软件为office家学生版2016. 2.首先打开我档,并在上方栏找到插入菜单,单击后在工具栏中找到文本-对象. 3 ...
- 关于EXCEL表格导入\导出数据…
good! 原文地址:关于EXCEL表格导入导出数据库的代码 作者:海豚湾孬蛋 导入/导出Excel --从Excel文件中,导入数据到SQL数据库中,很简单,直接用下面的语句: ...
- 使用 poi 通过浏览器方式导出Excel表格（导出字段与表格字段不一样且取值逻辑改变）
使用 poi 通过浏览器方式导出Excel表格(导出字段与表格字段不一样且取值逻辑改变) 思路:拿到表格页面查询的结果作为查询条件,表格页面的url和点击导出按钮的url是一样的,按钮的url多一个参 ...
- js 实现网页表格数据导出到Excel表
最近在做一个项目,涉及到导出数据到Excel表格,由于是采用的前后端分离模式开发的,之前常用的方法已经失效,在网上找了一些资料和方法 js文件下载地址 1.是采用的一个插件 xlsx.full.min ...
- vue中导出excel表格(支持导出图片)
//安装插件 npm install js-table2excel //引入插件 import table2excel from 'js-table2excel' //tableData数据 tabl ...
- Excel表格导入导出功能实现
## 01.员工管理-Excel导入功能介绍 ### 目标 在前面员工的添加是一个一个进行的,如果一次性添加多个员工信息,这时候就会很繁琐 因此需要我们开发一个批量导入的功能,将用户的信息存储到 ex ...
- 纯前端实现excel表格导入导出
前言 github: https://github.com/stardew516... 以往做excel表格下载功能的时候,都是后端生成好表格后,存储在某个地方,然后给前端一个链接,前端使用a标签加d ...
最新文章
- 2022-2028年中国基因工程药物产业市场研究及前瞻分析报告
- java面试必背知识点
- Spring MVC入门示例教程--表单处理
- ecs 云服务器 管理控制台_阿里云ECS服务器监控资源使用情况
- 近期计算机视觉竞赛汇总—总奖池高达344万人民币
- Spring ： 基于tx标签的声明式事物
- jQuery中兄弟元素、子元素和父元素的获取
- 新漏洞 RAMpage 曝光：2012年后发布的所有的 Android 手机都危险！
- 自动化测试工具selenium python_WEB自动化测试工具selenium录制器
- Ajax开发框架(下)[整理]
- SQL Server常用查询指令
- 数据清洗----缺失值处理
- java连接达梦数据库_java连接达梦数据库的简单代码
- 我的世界服务器显示fps,我的世界帧数优化攻略 低配、fps低玩家必看
- pppoe按需连接服务器无响应,pppoe服务器无响应怎么解决_pppoe拨号失败怎么办
- 灵遁者组诗：无数个存在的可能
- java进阶--深入理解Java自动装箱拆箱机制（Autoboxing and unboxing）
- 毕设论文数据分析记录-part2：相关性分析
- canvas动态风车
- golang 解析UTF8编码形式的字符串