在vue项目中实现 将数据导入Excel 三种方式(.xlsx , .csv)
2019-05-25 16:46
821 查看
方法一
Vue 将页面中表格数据导出excel
一、需要安装三个依赖:
npm install -S file-saver xlsx npm 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>
相关文章推荐
- 在Web界面中实现Excel数据大量导入的处理方式
- sqoop export工具把HDFS中的数据导入到rdbms系统中,实现方式有三种
- 数据绑定控件把数据导入到EXCEL的实现方式
- 用NPOI实现导入导出csv、xls、xlsx数据功能
- 利用PHP-ExcelReader实现PHP导入Excel数据[不通过CSV]
- 利用 js-xlsx 实现 Excel 文件导入并解析Excel数据成json格式的数据
- 利用PHP-ExcelReader实现PHP导入Excel数据[不通过CSV]
- web项目实现Excel数据导入导出
- JAVA WEB 实现文件数据导入(CSV、TXT、excel)
- 利用PHP-ExcelReader实现PHP导入Excel数据[不通过CSV]
- 5丶electron-vue安装js-xlsx,实现Excel导入导出
- 利用 js-xlsx 实现 Excel 文件导入并解析Excel数据成json格式的数据并且获取其中某列数据
- 用NPOI实现导入导出csv、xls、xlsx数据功能
- JAVA WEB 实现文件数据导入(CSV、TXT、excel)
- php利用phpexcel插件实现数据的导入和导出(支持csv\xls\xlsx格式和超过26个字段列)
- asp中如何实现导入客户端Excel文件数据至服务器端Access数据库
- 用DTS方式实现数据导入导出操作
- asp.net实现excel数据到sql server的导入
- jsp中将数据库中的数据导入到excel的实现
- C#实现将DataGridView中的数据导入到Excel中