需要引入的第三方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. win10 uwp 发布旁加载自动更新

    在很多企业使用的程序都是不能通过微软商店发布,原因很多,其中我之前的团队开发了很久的应用,结果发现没有用户能从微软应用商店下载所以我对应用商店没有好感.但是作为一个微软粉丝,怎么能不支持 UWP 开发 ...

  2. PowerShell 拿到显卡信息

    本文告诉大家如何在 PowerShell 通过 WMI 拿到显卡信息 在 PowerShell 可以使用下面代码拿到显卡的信息 Get-WmiObject Win32_VideoController ...

  3. dijkstra堆优化(multiset实现->大大减小代码量)

    例题: Time Limit: 1 second Memory Limit: 128 MB [问题描述] 在电视时代,没有多少人观看戏剧表演.Malidinesia古董喜剧演员意识到这一事实,他们想宣 ...

  4. JMETER+JENKINS接口测试持续集成

    FIDDER+ANT+JENKINS+JMETER+SVN+tomcat接口测试集成 操作流程: 1.测试人员通过FIDDER过滤抓取接口调用信息,导出成jmx文件.(jmeter支持命令行方式调用j ...

  5. CF161BDiscounts

    CF161B 题目大意;要购买\(n\)件物品,有\(A\)\(B\)两种类型,要求分成\(k\)组,其中如果其中一组含有\(A\)类物品,那么这一组最便宜的一件物品就会半价 怎么分组最小化代价? 我 ...

  6. 0014 标签显示模式:display(重点)

    目标: 理解 标签的三种显示模式 三种显示模式的特点以及区别 理解三种显示模式的相互转化 应用 实现三种显示模式的相互转化 2.1 什么是标签显示模式 什么是标签的显示模式? 标签以什么方式进行显示, ...

  7. The fifth day of Crawler learning

    使用mongoDB 下载地址:https://www.mongodb.com/dr/fastdl.mongodb.org/win32/mongodb-win32-x86_64-2008plus-ssl ...

  8. pycharm 设置代码折叠和展开(mac)

    折叠/展开 pycharm设置 点击PyCharm--->Preferences--->Editor--->General--->Code Folding,勾选Show cod ...

  9. 【C++】CCFCSP201803-2碰撞的小球

    // // main.cpp // CCFCSP20180318_2_碰撞的小球 // // Created by T.P on 2018/3/24. // Copyright © 2018年 T.P ...

  10. 记: Spring Data Jpa @OneToMany 级联查询被动触发的问题

    I have encountered a bug in using Spring Data Jpa. Specifically,when @OneToMany was used to maintain ...