Vue.js第四天學(xué)習(xí)筆記
分享一段將json數(shù)組數(shù)據(jù)以csv格式導(dǎo)出的代碼:
html:
<button class="btn btn-danger" @click='exportData'>導(dǎo)出</button>
js:
// 導(dǎo)出數(shù)據(jù)
exportData: function() {
let tableHeader = [{
colname: 'type',
coltext: '類型',
}, {
colname: 'name',
coltext: '商品名稱',
}, {
colname: 'number',
coltext: '數(shù)量',
}, {
colname: 'price',
coltext: '單價(jià)',
}];
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元/個(gè)'
}, {
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 = '進(jìn)貨信息導(dǎo)出' + 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);
}
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- vue.js初學(xué)入門教程(2)
- Vue.js 60分鐘輕松入門
- Vue.js快速入門實(shí)例教程
- JavaScript的Vue.js庫(kù)入門學(xué)習(xí)教程
- Vue.js第三天學(xué)習(xí)筆記(計(jì)算屬性computed)
- Vue.js第二天學(xué)習(xí)筆記(vue-router)
- Vue.js第一天學(xué)習(xí)筆記(數(shù)據(jù)的雙向綁定、常用指令)
- vue.js學(xué)習(xí)筆記之綁定style樣式和class列表
- Vue.js學(xué)習(xí)筆記之 helloworld
- JavaScript的MVVM庫(kù)Vue.js入門學(xué)習(xí)筆記
相關(guān)文章
基于vue實(shí)現(xiàn)新聞自下往上滾動(dòng)效果(示例代碼)
這篇文章主要介紹了vue新聞自下往上滾動(dòng)效果,當(dāng)鼠標(biāo)鼠標(biāo)放上暫停滾動(dòng),鼠標(biāo)移出繼續(xù)滾動(dòng),本文結(jié)合示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
vue大文件分片上傳之simple-uploader.js的使用
本文主要介紹了vue大文件分片上傳之simple-uploader.js的使用,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
vue實(shí)現(xiàn)簡(jiǎn)單轉(zhuǎn)盤抽獎(jiǎng)功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單轉(zhuǎn)盤抽獎(jiǎng)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03
vue中Axios添加攔截器刷新token的實(shí)現(xiàn)方法
Axios是一款網(wǎng)絡(luò)前端請(qǐng)求框架,本文主要介紹了vue中Axios添加攔截器刷新token的實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02
html中創(chuàng)建并調(diào)用vue組件的幾種方法匯總
這篇文章主要介紹了html中創(chuàng)建并調(diào)用vue組件的幾種方法匯總,幫助大家更好的理解和使用vue框架,感興趣的朋友可以了解下2020-11-11
一篇文章帶你使用Typescript封裝一個(gè)Vue組件(簡(jiǎn)單易懂)
這篇文章主要介紹了使用Typescript封裝一個(gè)Vue組件,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06

