亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue2.0 + element UI 中 el-table 數(shù)據(jù)導(dǎo)出Excel的方法

 更新時間：2018年03月02日 10:21:01   作者：oo靈性  
下面小編就為大家分享一篇vue2.0 + element UI 中 el-table 數(shù)據(jù)導(dǎo)出Excel的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

1、安裝相關(guān)依賴

主要是兩個依賴

npm install --save xlsx file-saver

如果想詳細看著兩個插件使用，請移步github。

https://github.com/SheetJS/js-xlsx

https://github.com/eligrey/FileSaver.js

2、組件里頭引入

import FileSaver from 'file-saver'
import XLSX from 'xlsx'

3、組件methods里寫一個方法

exportExcel () {
 /* generate workbook object from table */
 var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
 /* get binary string as output */
 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
},

注意：XLSX.uitls.table_to_book( 放入的是table 的DOM 節(jié)點 ) ，sheetjs.xlsx 即為導(dǎo)出表格的名字，可修改！

4、點擊導(dǎo)出按鈕執(zhí)行 exportExcel 的方法即可 。

組件里頭代碼截圖：

實現(xiàn)效果圖如下：

導(dǎo)出如下表格的數(shù)據(jù)到excel。

導(dǎo)出到excel 表格，結(jié)果如下：

相關(guān)鏈接：

該工具的其他使用場景( 如react 、jQ、angular ) http://sheetjs.com/

以上這篇vue2.0 + element UI 中 el-table 數(shù)據(jù)導(dǎo)出Excel的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

  • vue組件中的樣式屬性scoped實例詳解

    vue組件中的樣式屬性scoped實例詳解

    vue組件中的style標簽標有scoped屬性時表明style里的css樣式只適用于當(dāng)前組件元素 。接下來通過本文給大家分享vue組件中的樣式屬性scoped實例詳解，感興趣的朋友跟隨小編一起看看吧
    2018-10-10
  • 解決vue2.0動態(tài)綁定圖片src屬性值初始化時報錯的問題

    解決vue2.0動態(tài)綁定圖片src屬性值初始化時報錯的問題

    下面小編就為大家分享一篇解決vue2.0動態(tài)綁定圖片src屬性值初始化時報錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • 詳解Vue自定義指令及使用

    詳解Vue自定義指令及使用

    這篇文章主要介紹了Vue自定義指令及使用，對Vue感興趣的同學(xué)，可以參考下
    2021-05-05
  • 想到頭禿也想不到的Vue3復(fù)用組件還可以這么hack的用法

    想到頭禿也想不到的Vue3復(fù)用組件還可以這么hack的用法

    這篇文章主要為大家介紹了想到頭禿也想不到的Vue3復(fù)用組件還可以這么hack的用法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2023-04-04
  • Vue超出文本框顯示省略號鼠標滑入顯示全部的實現(xiàn)方法

    Vue超出文本框顯示省略號鼠標滑入顯示全部的實現(xiàn)方法

    在Vue項目中經(jīng)常需要處理文本內(nèi)容過長的情況,這篇文章主要給大家介紹了關(guān)于Vue超出文本框顯示省略號鼠標滑入顯示全部的實現(xiàn)方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
    2023-10-10
  • Vue實現(xiàn)網(wǎng)頁轉(zhuǎn)PDF方法流程詳解

    Vue實現(xiàn)網(wǎng)頁轉(zhuǎn)PDF方法流程詳解

    在日常的工作中，有時候會碰到需要將某個網(wǎng)址網(wǎng)頁保存成為pdf的情況，這篇文章主要介紹了用Vue實現(xiàn)網(wǎng)頁轉(zhuǎn)PDF的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-08-08
  • 在vue中使用公共過濾器filter的方法

    在vue中使用公共過濾器filter的方法

    這篇文章主要介紹了在vue中使用公共過濾器filter的方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
    2018-06-06
  • Vue實現(xiàn)星級評價效果實例詳解

    Vue實現(xiàn)星級評價效果實例詳解

    這篇文章主要介紹了Vue實現(xiàn)星級評價效果的實例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-12-12
  • Vue配合Django使用方式

    Vue配合Django使用方式

    Vue.js是前端三大框架之一,以其輕巧、高性能的特性脫穎而出,Vue.js專注于構(gòu)建數(shù)據(jù)驅(qū)動的Web界面,采用漸進式設(shè)計,易于上手,支持組件化開發(fā),核心功能包括響應(yīng)式數(shù)據(jù)綁定和視圖組件的組合,Vue還提供了生命周期、事件綁定等多種功能,支持ES6語法
    2024-09-09
  • vue Element左側(cè)無限級菜單實現(xiàn)

    vue Element左側(cè)無限級菜單實現(xiàn)

    這篇文章主要介紹了vue Element左側(cè)無限級菜單實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-06-06

最新評論