摘要:導(dǎo)出項(xiàng)目簡(jiǎn)介插件使用保存文件電子表格解析器安裝使用以示例給定引入插件新增方法錯(cuò)誤處理方式新增點(diǎn)擊事件瀏覽器會(huì)下載問(wèn)題導(dǎo)出時(shí)間格式轉(zhuǎn)換解決方案
element-ui 導(dǎo)出excel 項(xiàng)目簡(jiǎn)介
vue + elementUi
插件使用Project | Description |
---|---|
file-saver | 保存文件 |
xlsx | 電子表格解析器 |
npm install file-saver xlsx --save or yarn add file-saver xlsx使用(以el-table示例)
// table給定id問(wèn)題// 引入插件 import fileSaver from "file-saver" import xlsx from "xlsx" // methods新增方法 exportTable exportTable(){ let box = xlsx.utils.table_to_book(document.querySelector("#table-data")) let out = xlsx.write(box, { bookType: "xlsx", bookSST: true, type: "array" }) try { fileSaver.saveAs( new Blob([out], { type: "application/octet-stream" }), "sheet.xlsx" ) } catch (e) { // 錯(cuò)誤處理方式 } return out } // 新增點(diǎn)擊事件(exportTable) 瀏覽器會(huì)下載excel
導(dǎo)出時(shí)間格式轉(zhuǎn)換
解決方案:
let xlsxParam = { raw: true };
let wb = xlsx.utils.table_to_book(dom, xlsxParam)
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/99472.html
摘要:上傳組件點(diǎn)擊跳轉(zhuǎn)到該組件官方文檔用到的組件參數(shù)參數(shù)說(shuō)明類(lèi)型可選默認(rèn)值必選參數(shù),上傳的地址上傳的文件列表接受上傳的文件類(lèi)型覆蓋默認(rèn)的上傳行為最大允許上傳個(gè)數(shù)文件超出個(gè)數(shù)限制時(shí)的鉤子 1. 上傳 EXCEL Upload組件 點(diǎn)擊跳轉(zhuǎn)到該組件官方文檔 用到的upload組件參數(shù) 參數(shù) 說(shuō)明 類(lèi)型 可選 默認(rèn)值 action 必選參數(shù),上傳的地址 string --- --...
摘要:本人第一次寫(xiě)這個(gè)寫(xiě)的不好還望指出來(lái)作為一個(gè)由于公司產(chǎn)品的升級(jí)然促使我從一個(gè)后端人員自學(xué)變成前端的開(kāi)發(fā)人員公司做的數(shù)據(jù)管理系統(tǒng)所以離不開(kāi)表格了然后表格樣式統(tǒng)一啥的就想到封裝一個(gè)里面的了效果圖表格組件的引入與使用監(jiān)測(cè)數(shù)據(jù)表格 本人第一次寫(xiě)這個(gè) 寫(xiě)的不好還望指出來(lái)作為一個(gè)由于公司產(chǎn)品的升級(jí)然促使我從一個(gè)后端人員自學(xué)變成前端的開(kāi)發(fā)人員 !公司做的數(shù)據(jù)管理系統(tǒng)所以離不開(kāi)表格了 然后表格樣式統(tǒng)一啥...
摘要:社區(qū)的認(rèn)可目前已經(jīng)是相關(guān)最多的開(kāi)源項(xiàng)目了,體現(xiàn)出了社區(qū)對(duì)其的認(rèn)可。監(jiān)聽(tīng)事件手動(dòng)維護(hù)列表這樣我們就簡(jiǎn)單的完成了拖拽排序。 完整項(xiàng)目地址:vue-element-admin 系類(lèi)文章一:手摸手,帶你用vue擼后臺(tái) 系列一(基礎(chǔ)篇)系類(lèi)文章二:手摸手,帶你用vue擼后臺(tái) 系列二(登錄權(quán)限篇)系類(lèi)文章三:手摸手,帶你用vue擼后臺(tái) 系列三(實(shí)戰(zhàn)篇)系類(lèi)文章四:手摸手,帶你用vue擼后臺(tái) 系列...
摘要:社區(qū)的認(rèn)可目前已經(jīng)是相關(guān)最多的開(kāi)源項(xiàng)目了,體現(xiàn)出了社區(qū)對(duì)其的認(rèn)可。監(jiān)聽(tīng)事件手動(dòng)維護(hù)列表這樣我們就簡(jiǎn)單的完成了拖拽排序。 完整項(xiàng)目地址:vue-element-admin 系類(lèi)文章一:手摸手,帶你用vue擼后臺(tái) 系列一(基礎(chǔ)篇)系類(lèi)文章二:手摸手,帶你用vue擼后臺(tái) 系列二(登錄權(quán)限篇)系類(lèi)文章三:手摸手,帶你用vue擼后臺(tái) 系列三(實(shí)戰(zhàn)篇)系類(lèi)文章四:手摸手,帶你用vue擼后臺(tái) 系列...
摘要:今天在開(kāi)發(fā)的過(guò)程中需要做一個(gè)的導(dǎo)出功能。如果需要導(dǎo)出分頁(yè)數(shù)據(jù)這樣的需求是沒(méi)法滿足的。需要后臺(tái)生成一個(gè)文件鏈接,然后點(diǎn)擊下載。 今天在開(kāi)發(fā)的過(guò)程中需要做一個(gè)Vue的導(dǎo)出功能。老司機(jī)開(kāi)車(chē)使用 js-xlsx 里面有vue的部分可以參考廢話不多說(shuō)了,直接貼代碼 一、在index.html中引用js文件 showImg(https://segmentfault.com/img/bVSsSR?w...
閱讀 1085·2021-11-19 09:40
閱讀 2225·2021-11-15 18:00
閱讀 1274·2021-10-18 13:34
閱讀 2255·2021-09-02 15:40
閱讀 1542·2019-08-30 14:01
閱讀 1120·2019-08-30 11:11
閱讀 2487·2019-08-29 15:26
閱讀 734·2019-08-29 14:15