在vue项目中实现将数据导入Excel 三种方式(.xlsx , .csv)

方法一
Vue 将页面中表格数据导出excel
一、需要安装三个依赖：

  npm install -S file-saver xlsxnpm install -D script-loader

二、项目中新建一个文件夹：（vendor—名字任取）

里面放置两个文件Blob.js和 Export2Excel.js。
　　
链接：https://pan.baidu.com/s/1krRDSw6PHylWlg5yslwZGA 密码：qotw

下载后直接将文件夹放到src目录下即可。

三、在.vue文件中
　　在methods里写这两个方法：其中list是表格的内容

 // 导出表格
export2Excel() {require.ensure([], () => {let { exportJsonToExcel } = require('../../vendor/Export2Excel');// 表头let tHeader = ['序号', 'IMSI', 'MSISDN', '证件号码'];//表头对应字段名，要和下面数据key对应let filterVal = ['iAutoID', 'Address', 'AuctionDate', 'Area'];// 数据来源// let list = this.serachData;//模拟数据let list =  [{iAutoID: "4737", Address: "海门市海门镇南海路南、长江路东侧", AuctionDate: "0000-00-00", Area: ""},{iAutoID: "21337", Address: "上海市浦东新区东至:A13B-01地块,南至:A13B-01地块,西至:国展路,北至:A13B-01地块",Area: ""},{iAutoID: "17373", Address: "白马大道以东、建业路以北", AuctionDate: "0000-00-00", Area: ""},{iAutoID: "17271", Address: "黄陂区横店街川龙大道以东、横中路以北", AuctionDate: "0000-00-00", Area: "黄陂"},{iAutoID: "20577", Address: "南通市海门四甲镇东渐大道北侧、军工路南侧", AuctionDate: "0000-00-00", Area: ""},{iAutoID: "18929", Address: "奥诺斯特以东、黄河路以南", AuctionDate: "2018-09-21", Area: ""}]let data = this.formatJson(filterVal, list); //数据格式化var index1 = '资源列表';//导出时文件名exportJsonToExcel(tHeader, data, index1); //导出文件})},// 数据格式化formatJson(filterVal, jsonData){return jsonData.map(v => filterVal.map(j => v[j]))},

四、添加按钮导出调用export2Excel方法

<el-button plain size="mini" @click="export2Excel" >导出数据</el-button>

方法二
将table标签，包括tr、td等对json数据进行拼接，将table输出到表格上实现，这种方法的弊端在于输出的是伪excel，虽说生成xls为后缀的文件，但文件形式上还是html，代码如下

<template><button @click="tableToExcel">导出</button>
</template><script>
export default {data() {return {jsonData: [{name: "路人甲",phone: "123456",email: "123@123456.com"},{name: "炮灰乙",phone: "123456",email: "123@123456.com"},{name: "土匪丙",phone: "123456",email: "123@123456.com"},{name: "流氓丁",phone: "123456",email: "123@123456.com"}]};},methods: {tableToExcel() {//要导出的json数据//列标题let str = "<tr><td>姓名</td><td>电话</td><td>邮箱</td></tr>";//循环遍历，每行加入tr标签，每个单元格加td标签for (let i = 0; i < jsonData.length; i++) {str += "<tr>";for (let item in jsonData[i]) {//增加\t为了不让表格显示科学计数法或者其他格式str += `<td>${jsonData[i][item] + "\t"}</td>`;}str += "</tr>";}//Worksheet名let worksheet = "Sheet1";let uri = "data:application/vnd.ms-excel;base64,";//下载的表格模板数据let template = `<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>${worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>${str}</table></body></html>`;//下载模板window.location.href = uri + base64(template);}//输出base64编码function base64 (s) { return window.btoa(unescape(encodeURIComponent(s))) }}
};
</script>

方法三
通过将json遍历进行字符串拼接，将字符串输出到csv文件，代码如下

<template><button @click="tableToExcel">导出</button>
</template><script>
export default {data() {return {jsonData: [{name: "路人甲",phone: "123456",email: "123@123456.com"},{name: "炮灰乙",phone: "123456",email: "123@123456.com"},{name: "土匪丙",phone: "123456",email: "123@123456.com"},{name: "流氓丁",phone: "123456",email: "123@123456.com"}]};},methods: {tableToExcel() {//列标题，逗号隔开，每一个逗号就是隔开一个单元格let str = `姓名,电话,邮箱\n`;//增加\t为了不让表格显示科学计数法或者其他格式for (let i = 0; i < jsonData.length; i++) {for (let item in jsonData[i]) {str += `${jsonData[i][item] + "\t"},`;}str += "\n";}//encodeURIComponent解决中文乱码let uri = "data:text/csv;charset=utf-8,\ufeff" + encodeURIComponent(str);//通过创建a标签实现let link = document.createElement("a");link.href = uri;//对下载的文件命名link.download = "json数据表.csv";document.body.appendChild(link);link.click();document.body.removeChild(link);}}
};
</script>

在vue项目中实现将数据导入Excel 三种方式(.xlsx , .csv)相关推荐

vue 函数路由跳转_vue中通过路由跳转的三种方式
router-view 实现路由内容的地方,引入组件时写到需要引入的地方需要注意的是,使用vue-router控制路由则必须router-view作为容器. 通过路由跳转的三种方式 1.router ...
vue中实现路由跳转的三种方式（超详细整理）
vue中实现路由跳转的三种方式一.使用vue-router vue-router 本质是一个第三方的包用的时候需要下载步骤 (7步法 ): 下载vue-router模块到当前工程 yarn ad ...
Python找出列表中出现次数最多的元素三种方式
通过三种方式给大家介绍,具体详情如下所示: 方式一: 原理:创建一个新的空字典,用循环的方式来获取列表中的每一个元素,判断获取的元素是否存在字典中的key,如果不存在的话,将元素作为key,值为列表中 ...
Vue项目中最简单的使用集成百度UEditor方式，含图片上传
前言封面是UEditor的百度指数折线图.虽然今天已经是 2018 年,且优秀的富文本编辑器层出不穷(包括移动端),但从图中可以看出UEditor仍然维持着较高的搜索热度.而不少公司和个人也仍然 ...
微服务中数据聚合的三种方式
在微服务暴热的情形下,似乎不弄点微服务,已经是跟不上IT的大潮了. 因此,公司结合本身情况,以及将来的可拓展性,在我的主导下,在新的项目中采用了微服务架构然而,实施过程中遇到一个挠头的问题,就是数据 ...
vue路由跳转 router-link 清除历史记录的三种方式
1.在vue项目中说起路由跳转,我们最先想到的就是router-link标签以及this.$router.push函数. router-link和this.\$router.push的实现原理是一样的 ...
Action 中获取表单数据的三种方式
(尊重劳动成果,转载请注明出处:http://blog.csdn.net/qq_25827845/article/details/53138905 冷血之心的博客) Action 中获取表单提交数据 ...
html如何给3种渐变色,css中颜色渐变的实现（三种方式）
本篇文章给大家带来的内容是关于css中颜色渐变的实现(三种方式),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. !!注意IE9及之前的版本不支持渐变.Safari要加-webkit- ...
python手机版怎么运行项目或脚本-详解python运行三种方式
方式一交互式编程交互式编程不需要创建脚本文件,是通过 Python 解释器的交互模式进来编写代码. linux上你只需要在命令行中输入 Python 命令即可启动交互式编程,提示窗口如下: $ p ...

在vue项目中实现将数据导入Excel 三种方式(.xlsx , .csv)

在vue项目中实现将数据导入Excel 三种方式(.xlsx , .csv)相关推荐

最新文章

热门文章

在vue项目中实现 将数据导入Excel 三种方式(.xlsx , .csv)

在vue项目中实现 将数据导入Excel 三种方式(.xlsx , .csv)相关推荐

最新文章

热门文章

在vue项目中实现将数据导入Excel 三种方式(.xlsx , .csv)

在vue项目中实现将数据导入Excel 三种方式(.xlsx , .csv)相关推荐