vue框架vue-element-admin-master导出excel表格数据
前言：
加QQ技术交流群741843152，一起讨论哦~~~~
欢迎访问我个人博客，里面有更多干货哟~~：点击即可访问
这段时间在做一个后台管理系统时，需要导出后台管理系统从远程服务器中获取到的所有数据。顿时有点蒙，不知道改如何下手写代码，多亏了前端交流群的一位大哥教了我方法，再此再次表示感谢，现在记录下来分享给大家，希望这篇文章对你们有所帮助，欢迎扫描左边关注个人公众号，看文章更加方便和更加及时。
关注博主微信公众号，获取更多关于前端的干货哦
一、官方文档
老规矩，先附上官方文档的链接:https://panjiachen.github.io/vue-element-admin-site/zh/feature/component/excel.html#excel-%E5%AF%BC%E5%87%BA
二、安装插件
在你vue项目中的分别输入以下两行代码，安装依赖
npm install xlsx file-saver -S
npm install script-loader -S -D
三、在src目录下创建一个文件夹vendor,并且引入 Export2Excel.js
注意：这步很重要，步引入这两个文件，会报错的， 别问为什么知道，太不容易了哈哈哈
- 附上这两个代码的链接，希望各位动动贵手点个star哦:https://github.com/XiaoFanZhou-code/vendor
- 如果嫌弃Github打开速度太慢，请访问这个: https://gitee.com/woaink/vendor
- 直接打开复制粘贴就好哦！
四、 HTML代码
注：那那些table表格的代码我就不写了，根据你个人项目需求来自己写就好，在element-ui上就有相关的组件库使用。
为了页面效果更加好看一些，需要加一个导出按钮(button)，并且绑定一个监听事件，如下所示
导出el-button>
五、js代码，所要导出的数据
tableData: [
{
id: 1,
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
tag: "家"
},
{
id: 2,
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
tag: "公司"
},
{
id: 3,
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
tag: "家"
},
{
id: 4,
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄",
tag: "公司"
},
{
id: 5,
date: "2016-04-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄",
tag: "公司"
}
],
六、一键导出功能也就是按钮监听事件
handleDownload() {
// this.downloadLoading = true;
import("@/vendor/Export2Excel").then(excel => {
const tHeader = ["id", "date", "name", "address", "tag"];//要导出后表头是什么，可以跟tableDate中的表头不一致
const filterVal = [
"id",
"date",
"name",
"address",
"tag"
];
const data = this.formatJson(filterVal, this. tableData)
// const data = this.tableData;
excel.export_json_to_excel({
header: tHeader,
data,
filename: "table-list" //导出文件的名，自定义就好
});
// this.downloadLoading = false;
});
},
//下载方法中，需要用到的格式化json的方法
formatJson(filterVal, jsonData) {
return jsonData.map(v =>
filterVal.map(j => {
if (j === "id") {
//此处如没有要格式化的列，可以不用此判断
// return parseTime(v[j])
return v[j];
} else {
return v[j];
}
})
);
},
按照以上步骤来就能实现一键导出功能啦~~
https://nanxuan2020.oss-cn-hangzhou.aliyuncs.com/v2-148f2762190be75bf4090f8dcdd9e4c7_1440w.jpg
前言
Vue.js是前端一个比较火的MVVM框架，要使用它，我们必须提前配置，其中有一种安装方式是使用npm，比较适合比较大型的应用。今天就来看看这种方式如何操作，由于npm是国外的，使用起来比较慢，我们这里使用淘宝的cnpm镜像来安装vue。
注意。前提是已经安装npm
步骤
首先我们需要下载npm，因为我已经提前安装了node.js,安装包里面集成了npm，然后我们就可以利用npm命令从获取淘宝镜像的cnpm了。
- 打开命令行窗口，输入。
npm install -g cnpm --registry=https://registry.npm.taobao.org
- 获取到cnpm以后，我们需要升级一下，输入下面的命令
- 因为安装Vue需要npm的版本大于3.0.0，所以我们要升级一下，然后我们输入下面的命令，安装vue。
cnpm install vue
- 接下来安装vue-cli
cnpm install -g @vue/cli
至此所有的vue环境已经搭建好了
window键+R键，输入cmd弹出终端，输入vue -V 弹出以下效果说明已经安装成功
