import XLSX from "xlsx-style"  //ps  需要修改源码:在\node_modules\xlsx-style\dist\cpexcel.js 807行 的 var cpt = require(’./cpt’ + ‘able’); 改成 var cpt = cptable 不然会报错;

 

 
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表格的更多相关文章

  1. 黑马vue---17、vue中通过属性绑定绑定style行内样式

    黑马vue---17.vue中通过属性绑定绑定style行内样式 一.总结 一句话总结: 如果属性名中带有短线必须加引号,比如: h1StyleObj: { color: 'red', 'font-s ...

  2. vue 纯前端导出 excel 表格

    在开发后台管理系统的时候,很多地方都要用到导出excel 表格,比如将table中的数据导出到本地,那么实现这种需求往往有两种方案: 一.后端开发一个下载链接,前端将这个链接放到 a 标签的 href ...

  3. Vue中计算属性与class,style绑定

    var vm=new Vue({ el:'#app', data:{ a:2, }, computed:{ //这里的b是计算属性:默认getter b:{ get:function(){ retur ...

  4. vue实现前端导出excel表格

    1.在src目录下创建一个文件(vendor)进入Blob.js和Export2Excel.js 2.npm install -S file-saver 用来生成文件的web应用程序 3.npm in ...

  5. VUE中使用XLSX实现导出excel表格

    简介 项目中经常会用导出数据的场景,这里介绍 VUE 中如何使用插件 xlsx 导出数据 安装 ## 1.使用 npm 或 yarn 安装依赖(三个依赖) npm install -S file-sa ...

  6. Vue中实现自定义excel下载

    目录 第一种:后端生成excel 第二种:前端合成excel 总结 参考资料 最近在工作中遇到一个需求,就是需要在前端实现一个错误模板Excel的下载功能. 实现下载有两种方式,一种是后端生成一个ex ...

  7. vue中如何实现数据的双向绑定

    vue中如何实现数据的双向绑定 实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变) 由于直接写obj.name = this ...

  8. vue学习笔记(三)class和style绑定

    前言 通过上一章的学习vue学习笔记(二)vue的生命周期和钩子函数,我们已经更近一步的知道了关于vue的一些知识,本篇博客将进一步探讨vue其它方面的内容,vue中关于class和style绑定,关 ...

  9. C# 如何在Excel表格中插入、编辑和删除批注

    概述 为文档添加必要的批注可以给文档使用者提供重要的提示信息,下面的示例中,将介绍通过C#编程语言来给Excel表格中的指定单元格内容添加批注,此外,对于已有的批注,如果需要修改,我们也可以进行编辑或 ...

  10. Vue+element 实现文件导出xlsx格式

    傻瓜教程:   第一步:安装两个依赖包 npm install --save xlsx file-saver 第二步:建立一个Vue文件,导入以下代码即可 <template> <d ...

随机推荐

  1. 论文翻译:2020:ECAPA-TDNN: Emphasized Channel Attention, Propagation and Aggregation in TDNN Based Speaker Verification

    论文地址:ECAPA-TDNN:在基于TDNN的说话人验证中强调通道注意.传播和聚集 论文代码:https://github.com/TaoRuijie/ECAPA-TDNN 引用格式:Desplan ...

  2. 在日报、读后感、小说、公文模版、编程等场景体验了一把chatGPT

    总结/朱季谦 在日报.读后感.小说.公文模版.编程等场景体验了一把chatGPT,说下体会. 昨天经过一顿操作猛如虎的捣鼓,终于在Mac笔记本上将chatGPT的访问环境搭建了起来,忍不住立马开始玩起 ...

  3. Spring Boot启动时执行初始化操作三种方法分享

    @PostConstruct对于注入到Spring容器中的类,在其成员函数前添加@PostConstruct注解,则在执行Spring beans初始化时,就会执行该函数.但由于该函数执行时,其他Sp ...

  4. 数据采集之刷cnblog评论

    python代码如下: import random import time import requests cookies = { '__gads': 'ID=3c504aa17c4a7048:T=1 ...

  5. 为什么要使用 chmod 777

    如上图所示, 不使用sudo,报错没有权限 使用sudo,报错找不到命令 只好chmod 777一下了

  6. 【已解决】将jsp文件在浏览器打开直接出现代码,在浏览器出现本地地址,tomcat报错

    问题背景: 导入了一个项目直接打开可以,但是想跟一遍代码,把配置文件全部整理成为一个springmvc的基础配置文件 跟着配置到自己tomcat就不管怎样都是下面的截图  希望可以帮到一起报错的朋友快 ...

  7. python3中,isinstance() 函数

    #isinstance() 函数来判断一个对象是否是一个已知的类型,类似 type(). #返回值:如果对象的类型与参数二的类型相同则返回True,否则返回False 使用isinstance函数的实 ...

  8. 视觉十四讲:第十二讲_RGB-D稠密点云

    1.点云地图 所谓点云,就是由一组离散的点表示的地图,最基本的点包含x,y,z三维坐标,也可以带有r,g,b的彩色信息. #include <iostream> #include < ...

  9. vulnhub靶场之DRIFTINGBLUES: 9 (FINAL)

    准备: 攻击机:虚拟机kali.本机win10. 靶机:DriftingBlues: 9 (final),下载地址:https://download.vulnhub.com/driftingblues ...

  10. [BSR文摘] 如何解释CRP正常而多普勒超声显示关节炎活动的RA亚型

    如何解释CRP正常而多普勒超声显示关节炎活动的RA亚型 Braford CM, et al.Rheumatology 2016. Present ID: 72. 背景:临床门诊越来越多地利用肌肉骨骼超 ...