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. 迁移学习(DIFEX)《Domain-invariant Feature Exploration for Domain Generalization》

    论文信息 论文标题:Domain-invariant Feature Exploration for Domain Generalization论文作者:Wang Lu, Jindong Wang, ...

  2. ASCLL编码器-算术运算符_四则与取模运算

    ASCLL编码器 public static void main(String[] args) { //字符类型变量 char c = 'a'; int i = 1; //字符类型和int类型计算 S ...

  3. 【Django drf】视图层大总结 ViewSetMixin源码分析 路由系统 action装饰器

    目录 九个视图子类 视图集 继承ModelViewSet类写五个接口 继承 ReadOnlyModelView编写2个只读接口 ViewSetMixin源码分析 查找as_view方法 setattr ...

  4. FAQ 关于allure和pycharm的运行模式

    关于allure和pycharm的运行模式 案例 新建一个项目allure_mode 新建一个python代码test_allure_001.py 代码如下 import pytest, os def ...

  5. Spring03-IOC-循环依赖的实现(Debug查看spring解决循环依赖的过程)

    1 什么是循环依赖 如下,有类A和B,A中有一个类型为B的属性b,B中有一个类型为A的属性a,A和B相互依赖 public class A { private B b; public B getB() ...

  6. Eureka+SpringCloud微服务(入门一)

    项目地址 [CloudStudy项目](zko0/cloudStudy: Springcloud学习工程 (github.com)) 1.依赖版本 cloud:Hoxton.SR1 boot:2.2. ...

  7. 学习Java Day11

    今天学习了二维数组:

  8. Spring(AOP的认识、实现)

    2:Spring AOP AOP (Aspect Oriented Programming) 面向切面编程 OOP(Object Oriented Programming)面向对象编程,用对象的思想来 ...

  9. EPICS Archiver Appliance的定制部署1

    https://blog.csdn.net/weixin_43767046/article/details/112116112 简单部署试了一下之后,又试了下Site specific install ...

  10. (三) MdbCluster分布式内存数据库——节点状态变化及分片调整

    (三) MdbCluster分布式内存数据库--节点状态变化及分片调整   上一篇: (二) MdbCluster分布式内存数据库--分布式架构   昨天我们在测试节点动态扩缩容时,发现了一个小bug ...