最近项目中使用了导入导出的功能,在这里记录一下
- 项目框架vue
- ui框架 antd
导出
_exportFile(all) {
var ids = all === true ? { judgeInfoList: [] } : { judgeInfoList: this.row }
this.allLoading = true
const obj = Object.assign({}, this.form)
console.log(ids, obj)
this.exportBtn = true
this.exportAllBtn = true
exportFile(Object.assign(obj, ids))
.then(res => {
console.log(res)
if (res.isError) {
this.$message.error(res.error.message)
return
}
const blob = new Blob([res.data])
const a = document.createElement('a')
const url = window.URL.createObjectURL(blob)
a.href = url
console.log(res.headers)
a.download = decodeURI(res.headers['content-disposition'].split('=')[1])
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
})
.catch(err => {
console.log('err', err)
// this.$message.error('接口请求异常')
})
.finally(() => {
this.exportBtn = false
this.exportAllBtn = false
this.allLoading = false
})
},
导出时先判断一下是全部导出还是导出多个,转换成blob格式后创建一个下载链接的a标签手动点击一下,再删除a标签就完成了导出的功能
导入
importFile({
'files': [
{
'attachUrl': this.checkAccountParams.attachUrl,
'fileName': this.checkAccountParams.fileName,
'type': 2
},
{
'attachUrl': this.numberParams.attachUrl,
'fileName': this.numberParams.fileName,
'type': 1
}
],
'povertyType': this.obj.povertyType
}).then((res) => {
if (res.isError) {
this.$message.error(res.error.message)
} else {
this.fileList = []
this.numberFileList = []
this.visible = false
this.duplicate = false
this.duplicateNumber = false
this.$emit('changeList')
this.$message.success('导入成功')
}
}).finally(() => {
this.saveBtn = false
})
父组件
// 导入完成修改在册户数列表
changeList () {
this._list(1)
this.$emit('importBtn')
},