需要引入的第三方JS有:export.js、xlsx.extendscript.js、xlsx.full.min.js
JS太大不贴出来,放一个可下载百度云连接:https://pan.baidu.com/s/1jmu9UktuEZVnZ5B0ZWOb8w 提取码:pn6x 
 
拜读两位大佬的文章:
 
HTML部分:
 <button type="button" class="bt_css_s" @click="btn_export">导出</button>
JS部分:
  btn_export: function () {
var that = this;
//要导出去的标题
var arry = [['项目进度ID', '项目详情ID', '项目名称', '计划进度', '开始时间', '结束时间', '本年投资计划完成', '进度描述', '进度差异原因']];
// that.Data指要导出的数据
that.Data.map(a => {
var _arry = [];
_arry.push(a.ID.toString());
_arry.push(a.JHPID.toString());
_arry.push(a.NAME.toString());
_arry.push(a.JHJD.toString());
_arry.push(a.KSSJ == null ? "" : a.KSSJ.format('yyyy-MM-dd')); //格式化日期没有就返回空
_arry.push(a.JSSJ == null ? "" : a.KSSJ.format('yyyy-MM-dd')); //格式化日期没有就返回空
_arry.push(a.BNWC.toString());
_arry.push(a.JDMS.toString());
_arry.push(a.CYYY.toString());
return _arry;
}).forEach(a => {
arry.push(a);
});
var sheet = XLSX2.utils.aoa_to_sheet(arry);
//循环单元格设置样式
var s = sheet['!ref'];
sheet["A2"].s = {
font: {
name: '宋体',
sz: 18,
color: { rgb: "#FFFF0000" },
bold: true,
italic: false,
underline: false
},
alignment: {
horizontal: "center",
vertical: "center"
}
};
var rows = s.substr(s.length - 1, 1);
var cloums = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'];
for (var j = 0; j < cloums.length; j++) {
for (var i = 1; i <= rows; i++) {
if (i == 1) {
sheet[cloums[j] + i].s = { //样式
font: {
bold: true,
italic: false,
underline: false
},
alignment: {
horizontal: "left",
vertical: "left",
wrap_text: false
}
};
}
else {
sheet[cloums[j] + i].s = { //样式
alignment: {
horizontal: "left",
vertical: "left",
wrap_text: false
}
};
}
}
}
sheet["!cols"] = [{
wpx: 90
}, {
wpx: 90
}, {
wpx: 90
}, {
wpx: 90
}, {
wpx: 150
}, {
wpx: 150
}, {
wpx: 180
}, {
wpx: 150
}, {
wpx: 150
}, {
wpx: 150
}, {
wpx: 70
}, {
wpx: 150
}, {
wpx: 120
}]; //单元格列宽
openDownloadDialog(sheet2blob(sheet), that.format(new Date()) + '进度导出管理.xlsx');
}

Vue中使用js-xlsx导出Data数据到Excel的更多相关文章

  1. vue中使用js动画与velocity.js

    一:vue中使用js动画 根据上一篇安装animate.css之后 vue中有动画的钩子函数,@before-enter是内容由无到有的时候自动监听触发的函数,函数会接收到参数el,这样可以动态设置样 ...

  2. vue中的js引入图片,必须require进来

    需求:如何components里面的index.vue怎样能把assets里面的图片拿出来. 1.在img标签里面直接写上路径: <img src="../assets/a1.png& ...

  3. vue中的js引入图片,使用require相关问题

    vue中的js引入图片,必须require进来 或者引用网络地址 <template> <div class="home"> <img alt=&qu ...

  4. .NET使用Office Open XML导出大量数据到 Excel

    我相信很多人在做项目的都碰到过Excel数据导出的需求,我从最开始使用最原始的HTML拼接(将需要导出的数据拼接成TABLE标签)到后来happy的使用开源的NPOI, EPPlus等开源组件导出EX ...

  5. PHP导出MySQL数据到Excel文件

    PHP导出MySQL数据到Excel文件 转载 常会碰到需要从数据库中导出数据到Excel文件,用一些开源的类库,比如PHPExcel,确实比较容易实现,但对大量数据的支持很不好,很容易到达PHP内存 ...

  6. 前端 vue/react 或者 js 导入/导出 xlsx/xls (带样式)表格的功能

    第一种导出表格的功能: yarn add xlsx script-loader file-saver xlsx-style 效果展示 xlsx-style的bug修复:node_module/xlsx ...

  7. vue 导出JSON数据为Excel

    1. 安装三个依赖 npm install file-saver --save npm install xlsx --save npm install script-loader --save-dev ...

  8. vue中eslintrc.js配置最详细介绍

    本文是对vue项目中自带文件eslintrc.js的内容解析, 介绍了各个eslint配置项的作用,以及为什么这样设置. 比较详细,看完能对eslint有较为全面的了解,基本解除对该文件的疑惑. /* ...

  9. vue中创建js文件使用export抛出函数,import引入后不能绑定HTML的问题

    在es6中使用export和import实现模块化: js文件: export function test(x) { console.log(x); } vue组件: import {test} fr ...

随机推荐

  1. SpringBoot2.0 使用AOP统一处理Web请求日志(完整版)

    一,加入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...

  2. 2018-8-10-VisualStudio-合并代码文件

    title author date CreateTime categories VisualStudio 合并代码文件 lindexi 2018-08-10 19:16:52 +0800 2018-2 ...

  3. python类中的双下划线方法

    __getitem__,__setitem__和__delitem__ 实现了对象属性的字典化操作. class Person: def __init__(self, name, age, hobby ...

  4. 【js】 vue 2.5.1 源码学习(十二)模板编译

    大体思路(十) 本节内容: 1. baseoptions 参数分析 2. options 参数分析 3. parse 编译器 4. parseHTNL 函数解析 // parse 解析 parser- ...

  5. zoj 4124 "Median" (思维?假的图论?)

    传送门 来源:2019 年“浪潮杯”第十届山东省 ACM 省赛 题意: 对于一个包含n个数的(n为奇数)序列val[ ],排序后的 val[ (n+1) / 2 ] 定义为 median: 有 n 个 ...

  6. Java 5,6,7,8,9,10,11新特性吐血总结

    作者:拔剑少年 简书地址:https://www.jianshu.com/u/dad4d9675892 博客地址:https://it18monkey.github.io 转载请注明出处 java5 ...

  7. H3C通过端口ID决定端口角色

  8. HDU6383p1m2(二分)

    补个题.. 传送门 点我 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)To ...

  9. chrome查看当前网页cookie内容

    按下F12,打开开发者工具 然后点开Application,在点击cookie左侧的小三角,选择网页,就可以看见对应的cookies了

  10. MFC 任务托盘显示气泡

    void CTestDlg::OnClose() { ShowWindow(SW_HIDE); if (!m_bHideNoticeInfo) { ShowBalloonTip(_T(, ); m_b ...