AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

Vue.js第四天学习笔记

51自学网 http://www.wanshiok.com
Vue.js,学习笔记

分享一段将json数组数据以csv格式导出的代码:

html:

<button class="btn btn-danger" @click='exportData'>导出</button>

js:

// 导出数据  exportData: function() {   let tableHeader = [{    colname: 'type',    coltext: '类型',   }, {    colname: 'name',    coltext: '商品名称',   }, {    colname: 'number',    coltext: '数量',   }, {    colname: 'price',    coltext: '单价',   }];   let tableBody = [{    type: '食品',    name: '旺旺雪饼',    number: '100箱',    price: '25元/袋'   }, {    type: '食品',    name: '双汇火腿',    number: '50箱',    price: '5元/根'   }, {    type: '食品',    name: '毛毛虫面包',    number: '10箱',    price: '3元/袋'   }, {    type: '食品',    name: '阿尔卑斯棒棒糖',    number: '10箱',    price: '0.5元/个'   }, {    type: '食品',    name: '蒙牛酸奶',    number: '20箱',    price: '12.9元/瓶'   }, {    type: '水果',    name: '香蕉',    number: '10斤',    price: '2.5元/斤'   }, {    type: '水果',    name: '葡萄',    number: '20斤',    price: '4元/斤'   }, {    type: '水果',    name: '榴莲',    number: '10斤',    price: '24元/斤'   }, {    type: '水果',    name: '李子',    number: '20斤',    price: '4元/斤'   }];   var csv = '/ufeff';   var keys = [];   tableHeader.forEach(function(item) {    csv += '"' + item.coltext + '",';    keys.push(item.colname);   });   csv = csv.replace(//,$/, '/n');   tableBody.forEach(function(item) {    var _item = {};    keys.forEach(function(key) {     csv += '"' + item[key] + '",';    });    csv = csv.replace(//,$/, '/n');   });   csv = csv.replace(/"null"/g, '""');   var blob = new Blob([csv], {    type: 'text/csv,charset=UTF-8'   });   var csvUrl = window.URL.createObjectURL(blob);   var a = document.createElement('a');   var now = new Date();   function to2(num) {    return num > 9 ? num : '0' + num;   }   a.download = '进货信息导出' + now.getFullYear() + to2((now.getMonth() + 1)) + to2(now.getDate()) + to2(now.getHours()) + to2(now.getMinutes()) + to2(now.getSeconds()) + '.csv';   a.href = csvUrl;   document.body.appendChild(a);   a.click();   document.body.removeChild(a);  }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持wanshiok.com。


Vue.js,学习笔记  
上一篇:js中的eval()函数把含有转义字符的字符串转换成Object对象的方法  下一篇:微信公众平台开发教程(四) 实例入门:机器人回复(附源码)