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: '類(lèi)型', }, { colname: 'name', coltext: '商品名稱(chēng)', }, { colname: 'number', coltext: '數(shù)量', }, { colname: 'price', coltext: '單價(jià)', }]; let tableBody = [{ type: '食品', name: '旺旺雪餅', number: '100箱', price: '25元/袋' }, { type: '食品', name: '雙匯火腿', number: '50箱', price: '5元/根' }, { type: '食品', name: '毛毛蟲(chóng)面包', 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é)入門(mén)教程(2)
- Vue.js 60分鐘輕松入門(mén)
- Vue.js快速入門(mén)實(shí)例教程
- JavaScript的Vue.js庫(kù)入門(mén)學(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入門(mén)學(xué)習(xí)筆記
相關(guān)文章
一次VUE項(xiàng)目中遇到XSS攻擊的實(shí)戰(zhàn)記錄
XSS?攻擊是頁(yè)面被注入了惡意的代碼,下面這篇文章主要給大家介紹了一次VUE項(xiàng)目中遇到XSS攻擊的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-12-12Vue監(jiān)聽(tīng)數(shù)據(jù)的原理詳解
本篇文章主要介紹了Vue監(jiān)測(cè)數(shù)據(jù)的原理,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看2021-10-10解決vue router組件狀態(tài)刷新消失的問(wèn)題
這篇文章主要介紹了vue router組件狀態(tài)刷新消失的問(wèn)題,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-08-08vue+px2rem實(shí)現(xiàn)pc端大屏自適應(yīng)的實(shí)例代碼(rem適配)
不管是移動(dòng)端的適配,還是大屏需求,都離不開(kāi)不一個(gè)單位rem,rem是相對(duì)于根元素的字體大小的單位,下面這篇文章主要給大家介紹了關(guān)于vue+px2rem實(shí)現(xiàn)pc端大屏自適應(yīng)的相關(guān)資料,需要的朋友可以參考下2021-08-08Vue動(dòng)態(tài)綁定Class的幾種常用方式
在vue框架開(kāi)發(fā)中,有時(shí)候我們需要對(duì)元素的樣式進(jìn)行動(dòng)態(tài)控制,比如tab按鈕的切換,下面這篇文章主要給大家介紹了關(guān)于Vue動(dòng)態(tài)綁定Class的幾種常用方式,需要的朋友可以參考下2023-03-03vue實(shí)現(xiàn)的微信機(jī)器人聊天功能案例【附源碼下載】
這篇文章主要介紹了vue實(shí)現(xiàn)的微信機(jī)器人聊天功能,結(jié)合實(shí)例形式分析了基于vue.js的微信機(jī)器人聊天相關(guān)界面布局、ajax交互等操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2019-02-02利用Vue實(shí)現(xiàn)簡(jiǎn)易播放器的完整代碼
這篇文章主要給大家介紹了關(guān)于如何利用Vue實(shí)現(xiàn)簡(jiǎn)易播放器的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12