前端常用方法之匯出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
- vue + element + 匯入、匯出excel表格VueExcel
- vue+elementUI表格匯出excelVueUIExcel
- vue將表格匯出為excelVueExcel
- Vue實現匯出excel表格VueExcel
- 資料匯出為excel表格Excel
- 騰訊文件怎樣匯出excel表格 騰訊文件如何匯出excelExcel
- element-UI庫Table表格匯出Excel表格UIExcel
- vue 前端匯出 excelVue前端Excel
- vue匯出excel資料表格功能VueExcel
- springboot poi匯出excel表格Spring BootExcel
- PHP匯出大量資料到excel表格PHPExcel
- excel表格匯入word方法彙總Excel
- Element-ui元件庫Table表格匯出Excel表格UI元件Excel
- Vue匯出資料到Excel電子表格VueExcel
- vue2.0 匯出Excel表格資料VueExcel
- 前端匯出Excel之動態多級表頭前端Excel
- Excel模板匯出之動態匯出Excel
- vue+elementUI el-table匯出excel表格VueUIExcel
- node 抓取api資料匯出為excel表格APIExcel
- vue匯出excel表格步驟以及易出錯點VueExcel
- 前端實現Excel匯入和匯出功能前端Excel
- 踹掉後端,前端匯出Excel!後端前端Excel
- 將資料庫中資料匯出為excel表格資料庫Excel
- php如何將資料匯出成excel表格呢?PHPExcel
- vue+element將資料匯出成excel表格VueExcel
- java 匯入到EXCEL表格JavaExcel
- excel表格生成與匯入Excel
- asp.net Excel匯出方法ASP.NETExcel
- vue.js前端實現excel表格匯出和獲取headers裡的資訊Vue.js前端ExcelHeader
- vb用陣列方式快速匯出MSFlexGrid表格資料到Excel表格中陣列FlexExcel
- Java之POI操作Excel表-匯入匯出JavaExcel
- 資料庫文件編寫,如何通過Navicat把表導成表格?資料庫快速匯出為excel表格資訊,excel匯出到word表格資料庫Excel
- 使用 Laravel-Excel 和流的方法匯出 ExcelLaravelExcel
- 匯出excelExcel
- 純前端匯出微信通訊錄到 Excel前端Excel