前言

当我们做后台管理的时候，不免会遇到导出模版，将模版修改之后再导入传给后端，废话不多说，上代码

一、导出模板和导入xlsx文件

此为案列，仅供参考

 // 导出或导入弹出框<el-dialogtitle="导入":visible.sync="dialogLeadIn"width="40%"@close="dialogclose"><el-alerttitle="按照:二、三、四级功能添加、修改,不做删除."type="info":closable="false"show-iconclass="mb-5"/>//导出绑定方法gettemplateleadout<el-button @click="gettemplateleadout">导出模板</el-button><div>第二步</div><div>导入填写的模板文件，完成更新</div><el-uploadref="upload"class="upload-demo"accept=".xlsx"    // 上传文件类型:file-list="fileList"       // 上传的文件列表:http-request="uploadFile"  // 覆盖默认的上传行为，可以自定义上传的实现:action="ExcelAPI"    // 上传文件的接口地址:on-remove="handleRemove"   // 文件列表移除文件时的钩子:on-change="handleChange"   // 当文件上传成功或上传失败的时候触发multiple           // 是否支持多文件上传:limit="1"           // 最多上传1个:headers="importHeaders"    // 携代token，放在请求头中:auto-upload="false"         // 是否在选取文件后立即进行上传><el-button size="small">导入文件</el-button><br /><div slot="tip" class="el-upload__tip text-danger">*只能上传.xlsx文件,(暂不支持.xls)</div></el-upload><span slot="footer" class="dialog-footer"><el-button @click="dialogLeadIn = false">取 消</el-button><el-button :loading="btnLoading" type="primary" @click="importExcel">确 定</el-button></span></el-dialog>

注：弹出框中的导出与导出按钮

二、导出JS方法，单独写示例

1.接口方法

代码如下（示例）：新写一个 js文件放置方法

import { getToken } from '@/utils/auth'
import axios from 'axios'
import { Message } from 'element-ui'// 导出接口
export function handleTemplateExport(id) {axios.get(process.env.VUE_APP_BASE_API + 'api/project' + id, {headers: {'Authorization': getToken() // 携带token请求头},responseType: 'blob'//格式}).then(res =>{if (res.status !== 200) {Message({message: res.statusText,type: 'error',duration: 2000,showClose: true})return false}// 文件下载const blob = new Blob([res.data], {type: 'application/vnd.ms-excel' // 定义格式})let link = document.createElement('a')link.href = URL.createObjectURL(blob)link.setAttribute('download', 'excel表.xlsx')link.click()link = nullMessage({message: '导出成功',type: 'success',duration: 2000,showClose: true})}).catch(mgs =>{Message({message: '导出失败',type: 'error',duration: 2000,showClose: true})})
}

2.页面调用导出方法

注：需将刚创建的js文件中的handleTemplateExport方法引入页面

// 导出模板gettemplateleadout() {this.id = this.$route.query.id // 取query 里的参数handleTemplateExport(this.id) // 方法传参}

注：以上是导出全部内容，仅供参考

三、导入表格JS代码

data(){fileList: []，dialogLeadIn  = false}
computed:{// 上传地址ExcelAPI() {return process.env.VUE_APP_BASE_API + 'api/project'},// 设置上传的请求头部importHeaders() {return {Authorization: getToken()}}methods:{// 上传文件  暂存在本地，若点击取消，则上传无效uploadFile(file) {this.fileData.append('file', file.file)},// 监控上传文件列表handleChange(file, fileList) {const existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name)if (existFile) {this.$message.error('当前文件已经存在!')fileList.pop()}this.fileList = fileList},// 移除handleRemove(file, fileList) {this.fileList = fileList},// 上传附件  在点击弹出框确定时调用，才真正上传到后端importExcel() {if (this.fileList.length === 0) {this.$message({message: '请先选择上传Excel',type: 'warning',showClose: true})return false}this.fileData = new FormData() // new formData对象this.$refs.upload.submit() // 提交调用uploadFile函数 :data="{ projectId: this.$route.query.id }"this.fileData.append('projectId', this.$route.query.id)this.btnLoading = truethis.axios.post(this.ExcelAPI, this.fileData, { headers: { Authorization: getToken() } }).then(response => {this.btnLoading = falseif (response.data.message.success) {this.$notify({title: '成功',message: '导入成功',type: 'success',duration: 2000})this.fileList = []this.dialogLeadIn = false // 控制弹出框this.getprojectdetail()} else {this.dialogLeadIn = falsethis.$message({message: response.data.message.message,type: 'error',showClose: true})}}).catch(() => {this.btnLoading = false})},
}

注：以上是本篇文章全部内容，案例可供参考

vue+element-ui文件导出模板及导入xlsx文件相关推荐

Vue +Element UI后台管理模板搭建示例
2019独角兽企业重金招聘Python工程师标准>>> 一.蓝色主题 Element ui 后台管理 Demo https://github.com/taylorchen709/vu ...
vue+element ui完成头像上传功能（文件转base64）以及自定义布局。
1.自定义布局查阅element ui的头像上传功能,发现是点击头像位置才可以上传,那我们可不可以点击头像外部的按钮来上传头像呢? element ui效果图: ...
vue实现下载EXCEL模板、导入EXCEL文件
vue实现下载EXCEL模板.导入EXCEL文件在项目中很常见需要先下载模板,根据模板导入下面展示一些下载模板代码片段. 需要有一个下载模板的接口,点击下载触发函数,调用接口,返回下载地址接口 ...
nodeJs + webpack+vue+ element ui 环境安装
一.安装nodeJs 1.打开NodeJs官网:https://nodejs.org/en/download/ 点击下载 2.双击安装,安装过程基本直接"NEXT"就可以了.(w ...
【前端】Vue+Element UI案例：通用后台管理系统-代码总结（已开源）
文章目录前言项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
Vue + Element UI 实现登陆注册基本demo实例
Vue + Element UI 实现权限管理系统前端篇(二):Vue + Element 案例导入项目打开 Visual Studio Code,File --> add Folder ...
【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...

vue+element-ui文件导出模板及导入xlsx文件

vue文件的导出与导入

前言

一、导出模板和导入xlsx文件

二、导出JS方法，单独写示例

1.接口方法

2.页面调用导出方法

三、导入表格JS代码

vue+element-ui文件导出模板及导入xlsx文件相关推荐

最新文章

热门文章