Vue.js第四天学习笔记

 更新时间:2016年12月02日 10:18:39   作者:爱喝酸奶的吃货  
这篇文章主要为大家详细介绍了Vue.js第四天的学习笔记,json数组数据以csv格式导出,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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

相关文章

  • Vue中自定义标签及其使用方式

    Vue中自定义标签及其使用方式

    这篇文章主要介绍了Vue中自定义标签及其使用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • 一次VUE项目中遇到XSS攻击的实战记录

    一次VUE项目中遇到XSS攻击的实战记录

    XSS 攻击是页面被注入了恶意的代码,下面这篇文章主要给大家介绍了一次VUE项目中遇到XSS攻击的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2021-12-12
  • Vue监听数据的原理详解

    Vue监听数据的原理详解

    本篇文章主要介绍了Vue监测数据的原理,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看
    2021-10-10
  • 解决vue router组件状态刷新消失的问题

    解决vue router组件状态刷新消失的问题

    这篇文章主要介绍了vue router组件状态刷新消失的问题,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-08-08
  • Vue2.0 组件传值通讯的示例代码

    Vue2.0 组件传值通讯的示例代码

    本篇文章主要介绍了Vue2.0 组件传值通讯的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • vue+px2rem实现pc端大屏自适应的实例代码(rem适配)

    vue+px2rem实现pc端大屏自适应的实例代码(rem适配)

    不管是移动端的适配,还是大屏需求,都离不开不一个单位rem,rem是相对于根元素的字体大小的单位,下面这篇文章主要给大家介绍了关于vue+px2rem实现pc端大屏自适应的相关资料,需要的朋友可以参考下
    2021-08-08
  • Vue动态绑定Class的几种常用方式

    Vue动态绑定Class的几种常用方式

    在vue框架开发中,有时候我们需要对元素的样式进行动态控制,比如tab按钮的切换,下面这篇文章主要给大家介绍了关于Vue动态绑定Class的几种常用方式,需要的朋友可以参考下
    2023-03-03
  • Vue组件之全局组件与局部组件的使用详解

    Vue组件之全局组件与局部组件的使用详解

    本篇文章主要介绍了Vue组件之全局组件与局部组件的使用详解,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • vue实现的微信机器人聊天功能案例【附源码下载】

    vue实现的微信机器人聊天功能案例【附源码下载】

    这篇文章主要介绍了vue实现的微信机器人聊天功能,结合实例形式分析了基于vue.js的微信机器人聊天相关界面布局、ajax交互等操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下
    2019-02-02
  • 利用Vue实现简易播放器的完整代码

    利用Vue实现简易播放器的完整代码

    这篇文章主要给大家介绍了关于如何利用Vue实现简易播放器的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12

最新评论