element-ui 導出excel

鄒強發(fā)布于2019-08-23 13:44 / 2137人閱讀

摘要：導出項目簡介插件使用保存文件電子表格解析器安裝使用以示例給定引入插件新增方法錯誤處理方式新增點擊事件瀏覽器會下載問題導出時間格式轉(zhuǎn)換解決方案

element-ui 導出excel 項目簡介

vue + elementUi

插件使用

Project	Description
file-saver	保存文件
xlsx	電子表格解析器

安裝

    npm install file-saver xlsx --save 
    or 
    yarn add file-saver xlsx

使用(以el-table示例)

// table給定id


// 引入插件
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) {
   // 錯誤處理方式
 }
 return out
}


// 新增點擊事件（exportTable） 瀏覽器會下載excel

問題

導出時間格式轉(zhuǎn)換

解決方案:

let xlsxParam = { raw: true };

let wb = xlsx.utils.table_to_book(dom, xlsxParam)

云服務器 GPU云服務器 excel表格導出 excel導出出錯 excel導出亂碼 excel導入導出

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/99472.html

相關(guān)文章

element-ui上傳下載excel（超詳細der）

摘要：上傳組件點擊跳轉(zhuǎn)到該組件官方文檔用到的組件參數(shù)參數(shù)說明類型可選默認值必選參數(shù)，上傳的地址上傳的文件列表接受上傳的文件類型覆蓋默認的上傳行為最大允許上傳個數(shù)文件超出個數(shù)限制時的鉤子 1. 上傳 EXCEL Upload組件點擊跳轉(zhuǎn)到該組件官方文檔用到的upload組件參數(shù) 參數(shù) 說明類型可選默認值 action 必選參數(shù)，上傳的地址 string --- --...

Jeffrrey 2019-08-23 15:10 評論0 收藏0
基于Vue+element-ui 的Table二次封裝

摘要：本人第一次寫這個寫的不好還望指出來作為一個由于公司產(chǎn)品的升級然促使我從一個后端人員自學變成前端的開發(fā)人員公司做的數(shù)據(jù)管理系統(tǒng)所以離不開表格了然后表格樣式統(tǒng)一啥的就想到封裝一個里面的了效果圖表格組件的引入與使用監(jiān)測數(shù)據(jù)表格本人第一次寫這個寫的不好還望指出來作為一個由于公司產(chǎn)品的升級然促使我從一個后端人員自學變成前端的開發(fā)人員！公司做的數(shù)據(jù)管理系統(tǒng)所以離不開表格了然后表格樣式統(tǒng)一啥...

you_De 2019-08-22 18:43 評論0 收藏0
手摸手，帶你用vue擼后臺系列三(實戰(zhàn)篇)

摘要：社區(qū)的認可目前已經(jīng)是相關(guān)最多的開源項目了，體現(xiàn)出了社區(qū)對其的認可。監(jiān)聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。完整項目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺系列一(基礎(chǔ)篇)系類文章二：手摸手，帶你用vue擼后臺系列二(登錄權(quán)限篇)系類文章三：手摸手，帶你用vue擼后臺系列三(實戰(zhàn)篇）系類文章四：手摸手，帶你用vue擼后臺系列...

Channe 2019-08-20 17:15 評論0 收藏0
手摸手，帶你用vue擼后臺系列三(實戰(zhàn)篇)

摘要：社區(qū)的認可目前已經(jīng)是相關(guān)最多的開源項目了，體現(xiàn)出了社區(qū)對其的認可。監(jiān)聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。完整項目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺系列一(基礎(chǔ)篇)系類文章二：手摸手，帶你用vue擼后臺系列二(登錄權(quán)限篇)系類文章三：手摸手，帶你用vue擼后臺系列三(實戰(zhàn)篇）系類文章四：手摸手，帶你用vue擼后臺系列...

zgbgx 2019-08-29 12:46 評論0 收藏0
Vue2 導出excel

摘要：今天在開發(fā)的過程中需要做一個的導出功能。如果需要導出分頁數(shù)據(jù)這樣的需求是沒法滿足的。需要后臺生成一個文件鏈接，然后點擊下載。今天在開發(fā)的過程中需要做一個Vue的導出功能。老司機開車使用 js-xlsx 里面有vue的部分可以參考廢話不多說了，直接貼代碼一、在index.html中引用js文件 showImg(https://segmentfault.com/img/bVSsSR?w...

NotFound 2019-08-20 18:36 評論0 收藏0