Note: Due to requirements, the import and export demonstrated here are only for excel.
1. Export (download)
A method is encapsulated here, which can be directly referenced every time it is exported (downloaded).
1. Method encapsulation:
// export.js 文件
export function exportExcel (content,fileName1) {
const blob = new Blob([content],{
type:'text/plain'});
const fileName = fileName1;
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, fileName)
}else{
const linkNode = document.createElement('a');
linkNode.download = fileName; //a标签的download属性规定下载文件的名称
linkNode.style.display = 'none';
linkNode.href = URL.createObjectURL(blob); //生成一个Blob URL
document.body.appendChild(linkNode);
linkNode.click(); //模拟在按钮上的一次鼠标单击
URL.revokeObjectURL(linkNode.href); // 释放URL 对象
document.body.removeChild(linkNode);
}
}
2. Use the export page:
<el-link @click="Download">下载文件</el-link>
// 引用exportExcel导出方法
import {
exportExcel } from '../export.js'
// 导出
Download(){
// 调用后端接口
api.rateTemplateResource({
fileType:4}).then(res=>{
exportExcel (res.data, '调价模板.xls')
})
},
// 接口封装示例
rateTemplateResource: {
type: 'post',
url: host + '/EXP_021',
ContentType: 'application/json',
'responseType': 'blob',
},
2. Import
<el-button @click="importExcel()" type="primary" >选择文件</el-button>
<input type="file" v-show="false" @change="takeUpload($event)" ref="takeUpload" accept="/*" /><span>{
{fileName}}</span>
export default{
data(){
return{
fileName:'',
file:undefined,
}
},
methods:{
//上传excel
importExcel(){
this.$refs.takeUpload.value = ''
this.$refs.takeUpload.click()
},
//上传文件操作
takeUpload (e) {
let file = e.target.files[0]
let fileNameArr = file.name.split('.')
let forMat = fileNameArr[fileNameArr.length - 1]
if (!(forMat == 'xls' || forMat == 'xlsx')) {
this.$message.warning('导入文件只能是 xls、xlsx格式!')
return
}
this.file = file;
this.fileName = file.name;
var formData = new FormData()
formData.append('file', this.file)
// 接口调用
api.batchLeadInto(formData).then(res=>{
if(res.data.HEAD.CODE=='000'){
if(res.data.BODY.data.length>0){
let msg=res.data.BODY.data.slice(0,3).join(';')
this.$message({
type: 'error',message:msg})
this.fileName = ''
}else{
this.$message({
type: 'success',message:'操作成功'})
this.fileName = ''
}
}
})
},
}
}
Example pictures:
