vue 导出
方法一：
1、util自带工具包:
Export2Excel.js
2、引用：
import { export_json_to_excel } from ‘@/utils/Export2Excel’
3、导出方法
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => {
//
var props = j.toString().split('.')
if (props.length === 2) {
if (v[props[0]] === undefined || v[props[0]] === null) {
return ''
}
return v[props[0]][props[1]]
}
return v[j]
}))
},
//exportExcel(){}导出按钮方法名
exportExcel(){
var tHeader = ['企业名称', '监测点', '监测时间']
var filterVal = ['customerName', 'meterName', 'dataTvFormat']
var filename = 'excel表格名'
var that = this
//查询方法
getshow({
showCount: that.infoShowCount,
currentPage: that.infoCurrentPage,
param: {
vehicleId: that.vehicleId,
startTime: that.startTime,
endTime: that.endTime,
}
}
).then(response => {
const data = that.formatJson(filterVal, response.data)
export_json_to_excel({
header: tHeader,
data,
filename: filename,
autoWidth: true,
bookType: 'xlsx'
})
})
}
方法二：
视频来源：https://www.bilibili.com/video/BV1EK4y1L7ga
此方法能够导出多级表格。
1、安装xlsx库
npm install xlsx
2、 file-saver
npm install file-saver
3、编写保存函数，文件位置：src/utils/htmlToExcel.js
import FileSaver from “file-saver”; import XLSX from “xlsx”;
const htmlToExcel = {
getExcel(dom,title=‘默认标题’,){
var excelTitle = title;
var wb = XLSX.utils.table_to_book(document.querySelector(dom));
/* 获取二进制字符串作为输出 */
var wbout = XLSX.write(wb, {bookType: “xlsx”,bookSST: true,type: “array”});
try {
FileSaver.saveAs(
new Blob([wbout], { type: “application/octet-stream” }),
excelTitle + “.xlsx”
);
} catch (e) {
if (typeof console !== “undefined”) console.log(e, wbout);
}
return wbout;
} };
export default htmlToExcel;
4、使用函数，文件位置src/views/TablePage.vue
注:表格导出实现解释，给展示表格添加选择功能，通过handleSelectionChange函数将选中数据与selectData绑定，在选中需要导出数据后点击导出按钮，展示el-dialog并将selectData数据展示在el-dialog中的表格，此表格为最后导出的表格，所以id赋值selectTable，最后确认打印调用exportExcel函数，通过htmlToExcel.getExcel(‘#selectTable’,‘导出的自定义标题’)导出Excel文件。
<template>
<div>
<el-button type="primary" style="margin:20px;" @click="exportExcelSelect">导出Excel</el-button>
<el-table
:data="tableData"
@selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
>
</el-table-column>
<el-table-column
prop="date"
label="日期"
>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
>
</el-table-column>
<el-table-column label="详细地址">
<el-table-column
prop="province"
label="省份"
>
</el-table-column>
<el-table-column
prop="city"
label="市区"
>
</el-table-column>
<el-table-column
prop="address"
label="地址"
>
</el-table-column>
<el-table-column
prop="zip"
label="邮编"
>
</el-table-column>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
>
<template>
<el-button type="text" size="small">查看</el-button>
<el-button type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog title="表格保存预览" width="70%" :visible.sync="selectWindow">
<el-table :data="selectData" id="selectTable" height="380px">
<el-table-column
prop="date"
label="日期"
>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
>
</el-table-column>
<el-table-column label="详细地址">
<el-table-column
prop="province"
label="省份"
>
</el-table-column>
<el-table-column
prop="city"
label="市区"
>
</el-table-column>
<el-table-column
prop="address"
label="地址"
>
</el-table-column>
<el-table-column
prop="zip"
label="邮编"
>
</el-table-column>
</el-table-column>
</el-table>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="exportExcel">确定保存</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import htmlToExcel from '@/utils/htmlToExcel'
export default {
name: "ExcelPage",
data(){
return{
tableData: [
{
date: '2016-05-03',
name: '王小天',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小明',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-04',
name: '王小智',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-01',
name: '王小红',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-08',
name: '王小华',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-06',
name: '王小丽',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-07',
name: '王小花',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}
],
selectData:[],
selectWindow:false,
}
},
methods:{
exportExcel() {
htmlToExcel.getExcel('#selectTable','导出的自定义标题')
},
exportExcelSelect(){
if (this.selectData.length < 1){
this.$message.error('请选择要导出的内容！');
return false;
}
this.selectWindow = true;
},
handleSelectionChange(val) {
this.selectData = val;
}
}
}
</script>
<style scoped>
</style>
vue 导入
调用后端方法
<!-- 导入弹出框 -->
<el-upload ref="upload" class="upload-demo" accept=".xlsx, .xls"
:auto-upload="true" :show-file-list="false"
:headers="headers"
:on-success="handleSuccess"
:action="uploadTemplatePath">
<el-button type="primary" >导入Excel</el-button>
</el-upload>
引用令牌
import { getToken } from ‘@/utils/auth’ // get token from cookie
在data属性值添加接口名
uploadTemplatePath: process.env.VUE_APP_BASE_API + ‘/assetvehicle/import’
在计算函数中使用令牌
computed: {
headers() {
return {
access_token: getToken()
}
}
}
