组件封装
<template>
<div>
<el-button
v-if="importUrl"
type="success"
@click="importFile"
>导入</el-button>
<el-button
v-if="exportUrl"
type="success"
@click="exportFile"
>导出</el-button>
<el-dialog
title="导入 excel 提示"
:visible.sync="DialogVisible"
width="30%"
center
:close-on-click-modal="false"
>
<span>如果没有模版请先下载模版</span>
<span slot="footer" class="dialog-footer">
<el-button style="margin-bottom: 15px" @click="download()">
下载模板
</el-button>
<el-upload
ref="upload"
type="primary"
action="#"
:http-request="beforeUploadAdd"
>
<el-button type="primary">继续导入</el-button>
</el-upload>
</span>
</el-dialog>
</div>
</template>
<script>
import { getAccessToken } from "@/utils/auth";
import { ImportExcel, ExportExcel } from '@/api/exportAndImport/exportAndImport'
export default {
props: {
importUrl: {
type: String,
default: ''
},
exportUrl: {
type: String,
default: ''
},
importCode: {
type: String,
default: ''
},
exportCode: {
type: String,
default: ''
},
pam: {
type: Object,
default: function() {}
},
moduleUrl: {
type: String,
default: ''
}
},
data: function() {
return {
DialogVisible: false,
headers: { Authorization: "Bearer " + getAccessToken() }, // 设置上传的请求头部
baseUrl: process.env.VUE_APP_BASE_API,
}
},
methods: {
async beforeUploadAdd(obj) {
try {
const fd = new FormData()
fd.append('file', obj.file)
const { code, data } = await ImportExcel(this.importUrl, fd)
if (code === 200 && !data) {
this.$message({
type: 'success',
message: '导入成功!'
})
this.$emit('reload')
} else if (code === 200 && data) {
this.$message({
type: 'error',
message: '导入失败!'
})
this.downloadError(data)
}
} catch (error) {
console.error(error)
} finally {
this.DialogVisible = false
}
},
downloadError(data) {
this.DialogVisible = false
const val = this.baseUrl + `${data}`
var a = document.createElement('a')
a.href = val
a.click()
},
// 下载模板
download() {
const val = this.baseUrl + `${this.moduleUrl}`
// token下载方式（不带请求头）
// const token = getAccessToken()
// this.DialogVisible = false
// const val = this.baseUrl + `${this.moduleUrl}?token=${token}`
// var a = document.createElement('a')
// a.href = val
// a.download = 'bidModel.xls'
// a.click()
//携带请求头下载方式
fetch(val, {
method: 'GET',
// headers: new Headers({
// //自己加的头信息全都要转成string
// id: xxxx.toString(),
// 'ACCESS-TOKEN': window.localStorage.getItem('ACCESS-TOKEN') as string,
// }),
headers: this.headers
})
.then(res => res.blob())
.then(data => {
const blobUrl = window.URL.createObjectURL(data);
this.downloadFile(blobUrl);
});
},
downloadFile(blobUrl) {
const a = document.createElement('a');
a.download = 'bidModel.xls';
a.href = blobUrl;
a.click();
},
async importFile() {
this.DialogVisible = true
},
// 导出所有项目
async exportFile() {
try {
const { code, data } = await ExportExcel(this.exportUrl, this.pam)
if (code === 200) {
const dom = document.createElement('a')
dom.href = this.baseUrl + data
dom.style.display = 'none'
document.body.appendChild(dom)
dom.click()
dom.parentNode.removeChild(dom)
}
} catch (error) {
console.error(error)
}
}
}
}
// auth.js
// export function getAccessToken() {
// return localStorage.getItem(AccessTokenKey)
// }
</script>
页面引入
<ExportAndImport
export-url="导出接口地址"
import-url="导入接口地址"
module-url="模板下载接口地址"
:pam="参数obj"
@reload="导入后获取列表方法"
/>
文章来源地址https://www.toymoban.com/news/detail-613600.html
文章来源：https://www.toymoban.com/news/detail-613600.html
到了这里，关于前端项目之导入、导出、下载模板的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
