本文實例為大家分享了vue+element表格導(dǎo)出為Excel文件的具體代碼,供大家參考,具體內(nèi)容如下
專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計、成都網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)浙江免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都,凝聚了一批互聯(lián)網(wǎng)行業(yè)人才,有力地推動了上千多家企業(yè)的穩(wěn)健成長,幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。安裝這三個依賴
npm install xlsx file-saver -S
npm install script-loader -S -D
組件代碼
<template> <div> <el-button type="primary" @click="exportExcel">導(dǎo)出文件</el-button> <el-table :data="tableData" id='out-table' > <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> </div> </template> <script> //引入安裝的依賴 import FileSaver from 'file-saver' import XLSX from 'xlsx' export default { name: 'demo5', data() { return { tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀區(qū)金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀區(qū)金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀區(qū)金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀區(qū)金沙江路 1516 弄' }] } }, methods:{ // XLSX.uitls.table_to_book( 放入的是table 的DOM 節(jié)點 ) ,sheetjs.xlsx 即為導(dǎo)出表格的名字,可修改! exportExcel () { var wb = XLSX.utils.table_to_book(document.querySelector('#out-table')) var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' }) try { FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheetjs.xlsx') } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) } return wbout }, } } </script> <style scoped> .el-table{ margin-top:30px; } </style>
文章標(biāo)題:vue+element表格導(dǎo)出為Excel文件-創(chuàng)新互聯(lián)
文章出自:http://bm7419.com/article0/dgogio.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站收錄、微信小程序、軟件開發(fā)、域名注冊、標(biāo)簽優(yōu)化、小程序開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)