前端常用方法之匯出excel表格
1 安裝依賴
npm install -S file-saver xlsx(這裡其實安裝了2個依賴)
npm install -D script-loade
2 下載js依賴包
excel/Export2Excel
提取碼: w33n
3 html程式碼:
<el-button type="primary" @click="export2Excel()">匯出Excel</el-button>
4 js方法程式碼:
methods:{
export2Excel () {
require.ensure([], () => {
const { export_json_to_excel } = require('../../../excel/Export2Excel')
// 設定Excel的表格第一行的標題
const tHeader = ['表名', '中文名', '表的描述']
// 需要提取的欄位
const filterVal = ['tableName','tableNameCn','tableDesc'];
// 把data裡的tableData存到list this.tableData是表格資料
const list = this.tableData
// 將list的某些欄位資料提取出來的方法
const data = this.formatJson(filterVal, list);
// 獲取時間戳給檔案命名
const fileDate = new Date().getTime()
// 匯出Excel 表頭 匯出的資料 檔名
export_json_to_excel(tHeader, data, '標籤表' + fileDate)
// console.log(tHeader,list,fileDate);
})
},
// 將某些欄位資料提取出來的方法
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
},
}
相關文章
- vue實現前端匯出excel表格Vue前端Excel
- js匯出Excel表格JSExcel
- vue匯出Excel表格VueExcel
- springboot poi匯出excel表格Spring BootExcel
- vue + element + 匯入、匯出excel表格VueExcel
- vue+elementUI表格匯出excelVueUIExcel
- Vue實現匯出excel表格VueExcel
- vue將表格匯出為excelVueExcel
- element-UI庫Table表格匯出Excel表格UIExcel
- vue 前端匯出 excelVue前端Excel
- vue匯出excel資料表格功能VueExcel
- Element-ui元件庫Table表格匯出Excel表格UI元件Excel
- 騰訊文件怎樣匯出excel表格 騰訊文件如何匯出excelExcel
- Vue匯出資料到Excel電子表格VueExcel
- vue2.0 匯出Excel表格資料VueExcel
- 前端匯出Excel之動態多級表頭前端Excel
- Excel模板匯出之動態匯出Excel
- node 抓取api資料匯出為excel表格APIExcel
- vue+elementUI el-table匯出excel表格VueUIExcel
- vue匯出excel表格步驟以及易出錯點VueExcel
- 前端實現Excel匯入和匯出功能前端Excel
- 踹掉後端,前端匯出Excel!後端前端Excel
- vue+element將資料匯出成excel表格VueExcel
- php如何將資料匯出成excel表格呢?PHPExcel
- java 匯入到EXCEL表格JavaExcel
- vue.js前端實現excel表格匯出和獲取headers裡的資訊Vue.js前端ExcelHeader
- 將資料庫中資料匯出為excel表格資料庫Excel
- Spring學習手冊 2:Spring MVC 匯出excel表格SpringMVCExcel
- Java之POI操作Excel表-匯入匯出JavaExcel
- 使用 Laravel-Excel 和流的方法匯出 ExcelLaravelExcel
- VUE中使用vue-json-excel超級方便匯出excel表格資料VueJSONExcel
- SpringBoot+Vue之表格的CRUD與匯入匯出Spring BootVue
- 資料庫文件編寫,如何通過Navicat把表導成表格?資料庫快速匯出為excel表格資訊,excel匯出到word表格資料庫Excel
- 匯出excelExcel
- Vue element-ui 裡面的table匯出excel表格 步驟VueUIExcel
- vue + element UI 中 el-table 資料匯出Excel表格VueUIExcel
- SAP UI5 表格資料如何匯出成 Excel 檔案(Table Export As Excel)UIExcelExport
- EasyPoi框架實現Excel表格匯入框架Excel