vue 中使用 XLSX 和 xlsx-style 实现前端下载Excel表格
handleDownClick(){
// 模拟数据
var data = [
{'时间':'2020-01-12','新注册人数':'12','在线人数':'12','累计用户数':'12'},
{'时间':'2020-01-12','新注册人数':'12','在线人数':'12','累计用户数':'13'},
{'时间':'2020-01-12','新注册人数':'12','在线人数':'12','累计用户数':'14'},
{'时间':'2020-01-12','新注册人数':'12','在线人数':'12','累计用户数':'15'},
];
//表格标题
var dataTitle = '用户统计2020-01-10-2020-01-12';
// 配置文件类型
const wopts = { bookType: 'xlsx', bookSST: true, type: 'binary', cellStyles: true };
this.downloadExl(data, wopts, dataTitle)
},
// 下载功能
saveAs(obj, fileName) {
var tmpa = document.createElement("a");
tmpa.download = fileName || "未命名";
// 兼容ie
if ("msSaveOrOpenBlob" in navigator) {
window.navigator.msSaveOrOpenBlob(obj, "下载的文件名"+ ".xlsx");
} else {
tmpa.href = URL.createObjectURL(obj);
}
tmpa.click();
setTimeout(function() {
URL.revokeObjectURL(obj);
}, 100);
}, downloadExl(json, type, dataTitle) {
var tmpdata = json[0];
json.unshift({});
var keyMap = []; //获取keys
for (var k in tmpdata) {
keyMap.push(k);
json[0][k] = k;
}
var tmpdata = [];//用来保存转换好的json
json.map((v, i) => {
let data = keyMap.map((k, j) => {
// console.log(k,this.getCharCol(j));
return Object.assign({}, {
v: v[k],
position: (j > 25 ? this.getCharCol(j) : String.fromCharCode(65 + j)) + (i + 2)
});
});
return data; }).reduce((prev, next) => prev.concat(next)).forEach((v, i) => tmpdata[v.position] = {
v: v.v
});
var outputPos = Object.keys(tmpdata); //设置区域,比如表格从A1到D10
tmpdata["A1"] = {v:dataTitle};
outputPos = ["A1"].concat(outputPos);
tmpdata["A1"].s = { font: { sz: 14, bold: true, vertAlign:true }, alignment:{ vertical:"center", horizontal:"center" }, fill: { bgColor: { rgb: "E8E8E8"}, fgColor: { rgb: "E8E8E8" } } };//<====设置xlsx单元格样式
tmpdata["!merges"] = [{
s: { c: 0, r: 0 },
e: { c: 3, r: 0 }
}];//<====合并单元格 tmpdata["!cols"] = [
{wpx: 300},
{wpx: 300},
{wpx: 300},
{wpx: 300}
];//<====设置一列宽度 var tmpWB = {
SheetNames: ['mySheet'], //保存的表标题
Sheets: {
'mySheet': Object.assign({},
tmpdata, //内容
{
'!ref': outputPos[0] + ':' + outputPos[outputPos.length - 1] //设置填充区域
}
)
}
};
var tmpDown = new Blob([this.s2ab(XLSX.write(tmpWB,
{ bookType: (type == undefined ? 'xlsx' : type.bookType), bookSST: false, type: 'binary' }//这里的数据是用来定义导出的格式类型
))], {
type: ""
});
this.saveAs(tmpDown, "下载的文件名" + '.' + (type.bookType == "biff2" ? "xls" : type.bookType));
},
// 获取26个英文字母用来表示excel的列
getCharCol(n) {
let temCol = '',
s = '',
m = 0
while (n > 0) {
m = n % 26 + 1
s = String.fromCharCode(m + 64) + s
n = (n - m) / 26
}
return s
},
s2ab(s) {
if (typeof ArrayBuffer !== 'undefined') {
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;
} else {
var buf = new Array(s.length);
for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
},
vue 中使用 XLSX 和 xlsx-style 实现前端下载Excel表格的更多相关文章
- 黑马vue---17、vue中通过属性绑定绑定style行内样式
黑马vue---17.vue中通过属性绑定绑定style行内样式 一.总结 一句话总结: 如果属性名中带有短线必须加引号,比如: h1StyleObj: { color: 'red', 'font-s ...
- vue 纯前端导出 excel 表格
在开发后台管理系统的时候,很多地方都要用到导出excel 表格,比如将table中的数据导出到本地,那么实现这种需求往往有两种方案: 一.后端开发一个下载链接,前端将这个链接放到 a 标签的 href ...
- Vue中计算属性与class,style绑定
var vm=new Vue({ el:'#app', data:{ a:2, }, computed:{ //这里的b是计算属性:默认getter b:{ get:function(){ retur ...
- vue实现前端导出excel表格
1.在src目录下创建一个文件(vendor)进入Blob.js和Export2Excel.js 2.npm install -S file-saver 用来生成文件的web应用程序 3.npm in ...
- VUE中使用XLSX实现导出excel表格
简介 项目中经常会用导出数据的场景,这里介绍 VUE 中如何使用插件 xlsx 导出数据 安装 ## 1.使用 npm 或 yarn 安装依赖(三个依赖) npm install -S file-sa ...
- Vue中实现自定义excel下载
目录 第一种:后端生成excel 第二种:前端合成excel 总结 参考资料 最近在工作中遇到一个需求,就是需要在前端实现一个错误模板Excel的下载功能. 实现下载有两种方式,一种是后端生成一个ex ...
- vue中如何实现数据的双向绑定
vue中如何实现数据的双向绑定 实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变) 由于直接写obj.name = this ...
- vue学习笔记(三)class和style绑定
前言 通过上一章的学习vue学习笔记(二)vue的生命周期和钩子函数,我们已经更近一步的知道了关于vue的一些知识,本篇博客将进一步探讨vue其它方面的内容,vue中关于class和style绑定,关 ...
- C# 如何在Excel表格中插入、编辑和删除批注
概述 为文档添加必要的批注可以给文档使用者提供重要的提示信息,下面的示例中,将介绍通过C#编程语言来给Excel表格中的指定单元格内容添加批注,此外,对于已有的批注,如果需要修改,我们也可以进行编辑或 ...
- Vue+element 实现文件导出xlsx格式
傻瓜教程: 第一步:安装两个依赖包 npm install --save xlsx file-saver 第二步:建立一个Vue文件,导入以下代码即可 <template> <d ...
随机推荐
- Java 进阶P-7.2+P-7.3
控制反转 很长一段时间里,我对控制反转和依赖注入这两个概念很模糊,闭上眼睛想一想,总有一种眩晕的感觉.但为了成为一名优秀的 Java 工程师,我花了一周的时间,彻底把它们搞清楚了. 紧耦合 在我们编码 ...
- Java 进阶P-8.9+P-8.10
文件流 File Input Stream File Output Stream 对文件作读写操作 实际工程中已经较少使用 更常用的是以在内存数据或通信数据上建立的流,如数据库的二进制数据读写或网络端 ...
- 【Azure Cache for Redis】Python Djange-Redis连接Azure Redis服务遇上(104, 'Connection reset by peer')
问题描述 使用Python连接Azure Redis服务,因为在代码中使用的是Djange-redis组件,所以通过如下的配置连接到Azure Redis服务: CACHES = { "de ...
- 9月21日内容总结——计算机基础知识、typora软件的安装与软件内的部分markdown语法
今日内容总结 目录 今日内容总结 一.路径 1.绝对路径 2.相对路径 二.计算机的本质 三.计算机的五大组成部分 1.控制器 2.运算器 PS:CPU=控制器+运算器 3.存储设备 4.输入设备 5 ...
- 高效、优雅的对象copy之MapStruct入门到精通,实战踩坑版
一.前言 大家在开发中,最让人头疼的就是:对象之间的拷贝,前端的VO和数据库的Entity不一致! 性能最好的就是手动set,主要是枯燥且无技术含量,不仅耗费大量时间而且很容易出错: 所以我们要成为优 ...
- 文盘Rust -- 本地库引发的依赖冲突
作者:京东科技 贾世闻 问题描述 clickhouse 的原生 rust 客户端目前比较好的有两个clickhouse-rs 和 clickhouse.rs .clickhouse-rs 是 tcp ...
- 原生微信小程序的一些注意点
1.微信小程序的数据更新 Page({ // 响应式的数据定义在data里面 data: { bannerList: [] }, // 微信小程序的数据更新是在setData里面做的 this.set ...
- ctfshow_web入门 反序列化(254~266)
要是没接触过的师傅们,可以先看看这个 web 254 这个题没有考什么,get方式传入payload即可,这里xxxxxx,就是6gex而已 payload: ?username=xxxxxx& ...
- JZOJ 1073. 【GDOI2005】山海经
\(\text{Solution}\) 非常经典的求区间最大字段和 不难想到线段树,考虑处理区间答案的合并 维护前缀后缀最大和与区间答案,合并考虑跨中点贡献即可 代码打得非常恶心... \(\text ...
- 玫瑰花变蚊子血,自动化无痕浏览器对比测试,新贵PlayWright Vs 老牌Selenium,基于Python3.10
也许每一个男子全都有过这样的两个女人,至少两个.娶了红玫瑰,久而久之,红的变了墙上的一抹蚊子血,白的还是床前明月光:娶了白玫瑰,白的便是衣服上沾的一粒饭黏子,红的却是心口上一颗朱砂痣.--张爱玲< ...