1.导入
template
<el-dialog :title="upload.title" :visible.sync="upload.open" :before-close="uploadClose" width="400px" style="padding:10px" append-to-body>
<el-upload
ref="upload"
:limit="1"
accept=".xlsx, .xls"
:headers="upload.headers"
:action="upload.url"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:auto-upload="false"
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip text-center" slot="tip">
<span>仅允许导入xls、xlsx格式文件。</span>
<el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm">确 定</el-button>
<el-button @click="cancleFileForm">取 消</el-button>
</div>
</el-dialog>
data
// 用户导入参数
upload: {
// 是否显示弹出层（用户导入）
open: false,
// 弹出层标题（用户导入）
title: "",
// 是否禁用上传
isUploading: false,
// 设置上传的请求头部 getToken => 获取用户token的方法
headers: { Authorization: "Bearer " + getToken() },
// 上传的地址
url: process.env.VUE_APP_BASE_API + "/importData"
},
methods
//取消上传 关闭弹框
uploadClose(){
this.$refs.upload.clearFiles(); //清除上传文件列表
this.upload.open = false
},
// 提交上传文件
submitFileForm() {
this.$refs.upload.submit();
},
//取消上传文件
cancleFileForm(){
this.$refs.upload.clearFiles();
this.upload.open = false
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true;
},
二.导出
我这里使用的是xlxs这个库
1.安装依赖
npm install --save xlsx@0.16.0 file-saver@2.0.5
2.main.js中引入
import XLSX from 'xlsx'
Vue.prototype.XLSX = XLSX //挂载到全局方法方便调用
3.页面中使用
//以表格为例
exportConfirm(){
let list = this.tableData //表格中的数据
let tableData = [
['姓名','性别','年龄']//导出表头
] // 表格表头
list.forEach ((item,index)=> {
let rowData = []
//导出内容的字段
rowData = [
item.name,
item.sex,
item.age
]
tableData.push(rowData)
})
let ws = this.XLSX.utils.aoa_to_sheet(tableData)
let wb = this.XLSX.utils.book_new()
this.XLSX.utils.book_append_sheet(wb, ws, '统计')
this.XLSX.writeFile(wb, '统计.xlsx') // 保存的文件名
}
