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 相关文章推荐
根据分辩率调用不同的CSS.
Jan 08 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
Jan 09 Javascript
js点击出现悬浮窗效果不使用JQuery插件
Jan 20 Javascript
css与javascript跨浏览器兼容性总结
Sep 15 Javascript
WEB前端设计师常用工具集锦
Dec 09 Javascript
jQuery打字效果实现方法(附demo源码下载)
Dec 18 Javascript
jQuery查看选中对象HTML代码的方法
Jun 17 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
ES6学习教程之Map的常用方法总结
Aug 03 Javascript
JS调用安卓手机摄像头扫描二维码
Oct 16 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
May 09 Javascript
JavaScript实现答题评分功能页面
Jun 24 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
如何限制访问者的ip(PHPBB的代码)
2006/10/09 PHP
PHP调用JAVA的WebService简单实例
2014/03/11 PHP
php 计算两个时间相差的天数、小时数、分钟数、秒数详解及实例代码
2016/11/09 PHP
PHP网站常见安全漏洞,及相应防范措施总结
2021/03/01 PHP
JavaScript 常见对象类创建代码与优缺点分析
2009/12/07 Javascript
jQuery ctrl+Enter shift+Enter实现代码
2010/02/07 Javascript
添加JavaScript重载函数的辅助方法2
2010/07/04 Javascript
parseInt parseFloat js字符串转换数字
2010/08/01 Javascript
Pro JavaScript Techniques学习笔记
2010/12/28 Javascript
JS图像无缝滚动脚本非常好用
2014/02/10 Javascript
struts2+jquery组合验证注册用户是否存在
2014/04/30 Javascript
jQuery Validation PlugIn的使用方法详解
2015/12/18 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
2016/05/27 Javascript
详解js前端代码异常监控
2017/01/11 Javascript
javascript防篡改对象实例详解
2017/04/10 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
2017/07/14 Javascript
微信小程序之滚动视图容器的实现方法
2017/09/26 Javascript
node.js到底要不要加分号浅析
2018/07/11 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
2019/05/01 Javascript
解决layui弹框失效的问题
2019/09/09 Javascript
ssm+vue前后端分离框架整合实现(附源码)
2020/07/08 Javascript
python中PIL安装简单教程
2016/04/21 Python
python3转换code128条形码的方法
2019/04/17 Python
深入了解Python枚举类型的相关知识
2019/07/09 Python
python将字典内容写入json文件的实例代码
2020/08/12 Python
中国领先的专业家电网购平台:国美在线
2016/12/25 全球购物
Bowflex美国官方网站:高级家庭健身器材
2017/12/22 全球购物
承认错误的检讨书
2014/01/30 职场文书
应届毕业生通用的自荐书范文
2014/02/07 职场文书
爱国演讲稿500字
2014/05/04 职场文书
2014年学校领导班子对照检查材料
2014/09/19 职场文书
党的群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
考勤制度通知
2015/04/25 职场文书
开工典礼致辞
2015/07/29 职场文书
选调生挂职锻炼工作总结
2015/10/23 职场文书
一篇文章告诉你如何实现Vue前端分页和后端分页
2022/02/18 Vue.js