Vue.js第四天学习笔记


Posted in Javascript onDecember 02, 2016

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

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

Javascript 相关文章推荐
jquery $.ajax()取xml数据的小问题解决方法
Nov 20 Javascript
阻止子元素继承父元素事件具体思路及实现
May 02 Javascript
javascript实现完美拖拽效果
May 06 Javascript
jQuery手动点击实现图片轮播特效
Apr 20 Javascript
JS HTML5拖拽上传图片预览
Jul 18 Javascript
JS如何设置iOS中微信浏览器的title
Nov 22 Javascript
JS常用倒计时代码实例总结
Feb 07 Javascript
简单谈谈JS中的正则表达式
Sep 11 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
Aug 24 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
Aug 28 Javascript
npm qs模块使用详解
Feb 07 Javascript
如何实现js拖拽效果及原理解析
May 08 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
Dec 02 #Javascript
基于javascript实现按圆形排列DIV元素(三)
Dec 02 #Javascript
js中动态创建json,动态为json添加属性、属性值的实例
Dec 02 #Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
Nov 30 #Javascript
js 动态生成json对象、时时更新json对象的方法
Dec 02 #Javascript
详解JavaScript中数组的reduce方法
Dec 02 #Javascript
基于javascript实现按圆形排列DIV元素(二)
Dec 02 #Javascript
You might like
PHP删除目录及目录下所有文件的方法详解
2013/06/06 PHP
有关于PHP中常见数据类型的汇总分享
2014/01/06 PHP
php将一维数组转换为每3个连续值组成的二维数组
2016/05/06 PHP
详解PHP实现定时任务的五种方法
2016/07/25 PHP
完美的php分页类
2017/10/24 PHP
js中数组Array的一些常用方法总结
2013/08/12 Javascript
深入解析JavaScript中的变量作用域
2013/12/06 Javascript
21个值得收藏的Javascript技巧
2014/02/04 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
2015/09/17 Javascript
js判断手机号运营商的方法
2015/10/23 Javascript
简单解析JavaScript中的__proto__属性
2016/05/10 Javascript
打造自己的jQuery插件入门教程
2016/09/23 Javascript
Angular2开发——组件规划篇
2017/03/28 Javascript
JS+CSS实现下拉刷新/上拉加载插件
2017/03/31 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
2017/05/05 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
2019/05/20 Javascript
详解小程序云开发数据库
2019/05/20 Javascript
JavaScript函数IIFE使用详解
2019/10/21 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
2020/04/26 Javascript
vue-router 2.0 跳转之router.push()用法说明
2020/08/12 Javascript
[01:00:26]Ti4主赛事胜者组第一天 EG vs NEWBEE 1
2014/07/19 DOTA
[14:03]2017DOTA2亚洲邀请赛开幕式:12神兵演绎水墨中华
2017/04/01 DOTA
[36:05]完美世界DOTA2联赛循环赛 Forest vs DM 第一场 11.06
2020/11/06 DOTA
Python实现子类调用父类的方法
2014/11/10 Python
Python中多线程及程序锁浅析
2015/01/21 Python
Django imgareaselect手动剪切头像实现方法
2015/05/26 Python
使用python检测主机存活端口及检查存活主机
2015/10/12 Python
Python中的变量和作用域详解
2016/07/13 Python
css3利用transform变形结合事件完成扇形导航
2020/10/26 HTML / CSS
信息部岗位职责
2013/11/12 职场文书
初中优秀教师事迹材料
2014/08/18 职场文书
公司离职证明标准样本
2014/10/05 职场文书
高中历史教学反思
2016/02/19 职场文书
Vue Element-ui表单校验规则实现
2021/07/09 Vue.js
Nebula Graph解决风控业务实践
2022/03/31 MySQL