vue实现下载EXCEL模板、导入EXCEL文件

在项目中很常见需要先下载模板，根据模板导入

下面展示一些 下载模板代码片段。

需要有一个下载模板的接口，点击下载触发函数，调用接口，返回下载地址
接口请求数据格式为
Data: "/Template/PRO/car_import.xls"
所以要对数据进行处理，进而封装了一个函数如下
baseURL 在main.js文件全局注入返回为window.URLGLOBAL.URL(返回接口域名http://10.11.0.102:9527/)，relativeURL为返回的接口地址

export function combineURL(baseURL, relativeURL) {return relativeURL ? baseURL.replace(/\/+$/, '') + '/' + relativeURL.replace(/^\/+/, '') : baseURL
}

调用接口函数 代码片如下

  handleDownload() {CarDataTemplate({}).then(res => {if (res.IsSucceed) {window.open(combineURL(this.$baseUrl, res.Data), '_blank')} else {this.$message({message: res.Message,type: 'error'})}})},

导入

采用elment ui 组件库

<template><div class="c-upload-container"><el-uploadref="upload"drag:limit="limit":accept="accept":before-upload="beforeUpload":auto-upload="autoUpload"action="string"><svg-icon icon-class="upload-icon" class-name="cs--icon-upload" /><div class="el-upload__text">将文件拖到此处，或<em>点击上传</em><div slot="tip" class="el-upload__tip">支持格式： {{ accept }}，{{ tip }}</div></div></el-upload><footer class="cs-footer"><el-button @click="$emit('close')">取 消</el-button><el-button type="primary" :loading="btnLoading" @click="handleSubmit">确 定</el-button></footer></div>
</template>

beforeUpload函数如下ImportCar为导入的接口

 beforeUpload(file) {const fileFormData = new FormData()fileFormData.append('files', file)this.btnLoading = trueImportCar(fileFormData).then(res => {if (res.IsSucceed) {this.btnLoading = falsethis.$message({message: '导入成功',type: 'success'})this.$emit('refresh')this.$emit('close')} else {this.$message({message: res.Message,type: 'error'})this.btnLoading = false}})},

提交时 handleSubmit调用接口。

 handleSubmit() {this.$refs.upload.submit()}

取消按钮调用父组件函数关闭弹窗

Close() {this.dialogVisible = false}

vue实现下载EXCEL模板、导入EXCEL文件相关推荐

VUE+ElementUI生成Excel模板导入数据生成表格(自适应)
VUE+ElementUI生成Excel模板导入数据生成表格(自适应) 最近项目需求,需要根据条件查询对应数据的参数(每条数据的参数名称和个数都不一样) ,生成Excel表格模板,再通过Excel模 ...
php单元格字体颜色,PHPExcel API接口用法大全，按模板导入excel，美化excel，导出图片，设置单元格字体颜色背景色边框，合并单元格，设置行高列宽...
PHPExcel API接口用法大全,按模板导入excel,美化excel,导出图片,设置单元格字体颜色背景色边框,合并单元格,设置行高列宽 2020-08-31 85 一:读取excel表模板$ph ...
Excel原封不动导入txt文件
要Excel原封不动导入txt文件,包括不漏掉数字前面的0,要在导入的时候,选择固定宽度导入,然后选中每一列,再选文本而不是常规,就行了.别忘了从第一列一直到最后一列都要选.
使用EasyPoi利用excel模板导出excel表格下载
前言:使用excel模板导出excel的好处在于可以事先在模板上定义颜色.格式等,适用于模板设计得比较灵活复杂的场景一.添加jar包 <dependency><groupId> ...
.Net NPOI 根据excel模板导出excel、直接生成excel
一.根据Excel模板导出excel 1.导入NPOI.dll 2.DAL中添加类ExportExcel.cs using NPOI.SS.UserModel; using System; usin ...
springboot+poi开发excel导出加载Excel模板导出 Excel批量导出详解
提到Excel导出功能,可能很多人都使用springmvc框架做过,笔者今天要给大家分享的是基于springBoot开发Excel复杂模板导出功能(所谓复杂模板指在模板里的特定表头里有不同的单元格合并 ...
java 根据excel模板导出excel
java 根据excel模板导出excel 由于项目需求,最近做了一个需要根据查询接口导出excel表格数据的需求 pom依赖: <dependency><groupId>or ...
java 分析excel模板,java 根据excel模板导出excel
java 根据excel模板导出excel 由于项目需求,最近做了一个需要根据查询接口导出excel表格数据的需求 pom依赖: org.apache.poi poi 3.16 org.apache. ...
可视化,市场分析表Excel模板,财务统计EXCEL模版,人员变动EXCEL模版,销量完成度Excel模板
可视化,市场分析表Excel模板,财务统计EXCEL模版,人员变动EXCEL模版,销量完成度Excel模板可视化科技风EXCEL模版可视化EXCEL模版,科技风十足,本小白做EXCEL没有模版真的 ...
使用教程--通过Excel模板导入数据到表单
大家好,增加Excel导入数据功能在挺早之前就列在我的开发计划中了.由于各种事耽搁,导致才上线这个功能.废话不多说了.直接讲讲,在Z平台中是怎样用Excel导入数据的. 我以两个例子来为大家讲解使用方 ...

vue实现下载EXCEL模板、导入EXCEL文件

vue实现下载EXCEL模板、导入EXCEL文件

在项目中很常见需要先下载模板，根据模板导入

导入

vue实现下载EXCEL模板、导入EXCEL文件相关推荐

最新文章

热门文章