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+px2rem實現pc端大屏自適應的實例代碼(rem適配)
不管是移動端的適配,還是大屏需求,都離不開不一個單位rem,rem是相對于根元素的字體大小的單位,下面這篇文章主要給大家介紹了關于vue+px2rem實現pc端大屏自適應的相關資料,需要的朋友可以參考下2021-08-08

