element-ui 導出excel

鄒強發布于2019-08-23 13:44 / 2123人閱讀

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

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

問題

導出時間格式轉換

解決方案:

let xlsxParam = { raw: true };

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99472.html

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

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

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

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

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

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

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

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

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

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

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