vue+elementUI做一个后台管理系统,其中表格最简单的导入导出功能
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
//导出
//HTML
<el-table class="excelTable" :data="excelData" border v-show="false">
<el-table-column label="串码" prop="QMNO"></el-table-column>
</el-table>
<el-button class="billButton" type="primary" @click="exportExcel">导出</el-button>
//方法
exportExcel () {
var wb = XLSX.utils.table_to_book(document.querySelector('.excelTable'))//需要导出的表格的节点
var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
try {
FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '导出的Excel名字.xlsx')
} catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
return wbout
},
//导入
//HTML
<vue-xlsx-table class="billButton" @on-select-file="importEXCEL" style="margin: 0 10px;">导入</vue-xlsx-table>
<el-dialog title="串码导入" :visible.sync="excelDialogVisible">
<el-table :data="excelTableData" border>
<el-table-column label="串码" prop ="QMNO" show-overflow-tooltip></el-table-column>
</el-table>
<span slot="footer" class="dialog-footer">
<el-button @click="excelDialogVisible = false">取消</el-button>
<el-button type="primary" @click="excelCommit">确定</el-button>
</span>
</el-dialog>
//导入
importEXCEL(data){
this.excelTableData = []
for(var item of data.body){
this.excelTableData.push({
QMNO:item.串码,
})
}
this.excelTableHeader = data.header
this.excelDialogVisible = true
},
//导入确定
excelCommit(){
this.passTable = this.passTable.concat(this.excelTableData)
this.excelDialogVisible = false
},
//补充
一个报表,进入页面有分页,但是导出的却是全部数据。以上绑定Dom的方法就不行了,浏览器直接崩溃,后来查资料解决了问题。但是不能兼容IE9一下:
//导出
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
},
exportExcel () {
if(navigator.appName == "Microsoft Internet Explorer"&&parseInt(navigator.appVersion.split(";")[1].replace(/[ ]/g, "").replace("MSIE",""))<10){
alert("您的浏览器版本过低,请下载IE9及以上版本");
}else{
require.ensure([], () => {
const { export_json_to_excel } = require('../../../../vendor/Export2Excel'); //引入文件
//将对应的属性名转换成中文
const tHeader = ['货主', '货主描述',"仓库","仓库描述","库存地点","库存地点描述","物料编码","物料描述","库存数量"];
//table表格中对应的属性名
const filterVal = ['BUKRS', 'BUTXT',"WERKS","WETXT","LGORT","LGOBE","MATNR","MAKTX","MENGE"];
const list = this.stockData
const data = this.formatJson(filterVal, list)
export_json_to_excel(tHeader, data, '库存报表');
})
}
},
//vendor文件网上可以直接下载到项目