网络编程 
首页 > 网络编程 > 浏览文章

Vue.js第四天学习笔记

(编辑:jimmy 日期: 2024/11/18 浏览:3 次 )

分享一段将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);
  }

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

上一篇:js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
下一篇:微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 网站地图 SiteMap