vue项目下的导入和导出
本篇博文主要记录我们在写项目的时候经常需要用到导入和导出。
导入
- 首先定义一个模态弹窗,一般情况下会使用一个
input
(设置opacity:0)覆盖在显示的按钮上面
<!-- 3.导入 -->
<Modal title="批量导入" v-model="importVisual" width="450px" class="page-open-question-import">
<div class="import-btn">
<input
class="upload-input"
@change="fileChange($event)"
name="files"
type="file"
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
/>
<Button
type="primary"
ghost
style="margin-left:40px"
icon="ios-cloud-upload-outline"
>点击上传Excel文件</Button>
<span class="file-name" v-show="fileName" :title="fileName">{{fileName}}</span>
</div>
<div class="import-text">
<span>文件小于10M,内容需符合模板规范</span>
<span>导入文档前请先添加好相应的类目</span>
</div>
<div class="import-example" @click="download">
<Icon type="ios-cloud-download-outline" />下载规范模板
</div>
<div slot="footer">
<Button @click="importVisual=false">取消</Button>
<Button type="primary" @click="importOk">确定</Button>
</div>
</Modal>
- 通过
type='file'
的输入框获取到文件信息,一般情况下的导入接口使用的是formdata
信息
// 导入选择文件
fileChange (el) {
this.importFile = el.target.files[0];
this.fileName = this.importFile.name;
},
// 确定导入
importOk () {
let param = new FormData();
param.append('file', this.importFile);
importData(param, {
kgId: this.kgId
}).then(res => {
// 导入成功后操作
......
this.importVisual = false;
this.$Message.success('导入成功!')
})
},
导出
get 请求
一般情况下,我们可以直接使用window.open()
的方法来导出后端提供的get请求;
// 根据参数导出数据
downloadModel () {
window.open(
`${httpConfig.baseURL}/kg/dataset/data/template/${this.datasetId}`
);
}
post 请求
有的接口因为传参比较多,会需要使用post请求,那么上面的方法就不合适,通用的请求会出现乱码,大多数情况下我们会使用表单提交的方法
- 创建form表单请求的方法
// 导出文件
formSubmit (param, url) {
var $form = document.getElementById('exportForm');
if (!$form) {
$form = document.createElement('form');
$form.setAttribute('id', 'exportForm');
$form.setAttribute('method', 'post');
$form.style.display = 'none';
document.getElementById('exportParent').appendChild($form);
}
$form.setAttribute('action', url);
// 记得要把token信息带上
let token = this.$cookies.get('access_token');
param.access_token = token;
for (var obj in param) {
var input = document.createElement('input');
input.type = 'hidden';
input.name = obj;
input.value = param[obj];
$form.appendChild(input);
}
$form.submit();
}
- 导出的方法中使用
// 确认导出
exportOk () {
// 根据label获取id
......
// 请求导出
this.formSubmit(
{
kgId: this.kgId,
status: this.status,
categoryIds: this.categoryIds.join('|')
},
this.exportUrl
);
}
vue项目下的导入和导出的更多相关文章
- Vue框架下实现导入导出Excel、导出PDF
项目需求:开发一套基于Vue框架的工程档案管理系统,用于工程项目资料的填写.编辑和归档,经调研需支持如下功能: Excel报表的导入.导出 PDF文件的导出 打印表格 经过技术选型,项目组一致决定通过 ...
- 使用vue-cli脚手架初始化Vue项目下的项目结构
概述 vue-cli是Vue 提供的一个官方命令行工具,可用于快速搭建大型单页应用.该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程.只需几分钟即可创建并启动一个带热重载.保存时静态检查以及 ...
- vue入坑教程(二)在vue项目中如何导入element以及sass
在项目中导入element以及sass.stylus等方便开发的工具以及UI框架 (1)如何在vue项目中导入elementUI框架 elementUI是饿了么团队开发出来基于vue的前端UI框架,其 ...
- vue + iview 怎样在vue项目下添加ESLint
参考:https://segmentfault.com/a/1190000012019019?utm_source=tag-newest 使用iview框架的MenuGroup标签,vscode报红, ...
- Linux 环境下 MySQ导入和导出MySQL的sql文件
将服务器上的文件导入或导出还需要使用工具传输到本机中,推荐使用winscp,与xshell搭配使用 1 导入数据库 两种方法 .首先建空数据库 mysql>create database abc ...
- windows下cmd导入与导出mysql 数据库
一.导出数据库 假设导到C:\ordersys.sql 1.CMD下:输入mysqldump -u 用户名 -p 导出的数据库名>c:\ordersys.sql 2.CMD会提示输入密码:输入密 ...
- vue项目多列导入
用axios.post传一个数组参数使用:JSON.stringify(this.params) <form> <span class="upimg">&l ...
- vue项目下使用iview总结
iview在IE浏览器下有问题,打开页面是空白
- Linux下oracle导入(exp)导出(imp)出现"Failed to open ...for reader/write"错误
随机推荐
- 【VC++开发实战】迅雷晒密及批量查询流量程序
迅雷第一次登录是不需要验证码的,就很方便了.首先还是要解决登录的问题,也不是那么容易解决的,这个是在POST是提交的表单[u=joneeky%40qq.com&p=cf1e22e61d987c ...
- 基于 H5与webGL 的低碳工业园区监控系统
前言 低碳工业园区的建设与推广是我国推进工业低碳转型的重要举措,低碳工业园区能源与碳排放管控平台是低碳工业园区建设的关键环节.如何对园区内的企业的能源量进行采集.计量.碳排放核算,如何对能源消耗和碳排 ...
- codeforces 1020 C Elections(枚举+贪心)
题意: 有 n个人,m个党派,第i个人开始想把票投给党派pi,而如果想让他改变他的想法需要花费ci元.你现在是党派1,问你最少花多少钱使得你的党派得票数大于其它任意党派. n,m<3000 思路 ...
- python学习(10)字典学习,写一个三级菜单程序
学习了字典的应用.按老师的要求写一个三级菜单程序. 三级菜单程序需求如下: 1.深圳市的区--街道--社区---小区4级 2.建立一个字典,把各级区域都装进字典里 3.用户可以从1级进入2级再进入3级 ...
- Spring——管理Bean的生命周期
我们可以自定义bean的初始化和销毁方法,这里所指的的初始化和bean的构造不同,初始化是在bean构造完成后,对bean内部的属性或一些逻辑进行初始化. 首先要弄清一些概念: 构造(对象创建) 单实 ...
- django中Template语言
Template本身也有自己的语言和语法,用来处理简单的数据显示 常用语法 判断指令 {% if 条件 %}...{%endif%} {% if 条件 %}...{%elif 条件 %}...{%en ...
- Redis Cluster 介绍与搭建
转:http://blog.csdn.net/men_wen/article/details/72853078 Redis Cluster 介绍与搭建 1. Redis Cluster介绍 Redis ...
- css 纯css轮播图 示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- Hapi+MySql项目实战数据库操作(四)
数据库访问 下面以Node的ORM框架Sequelize来操作数据库,Mysql为例. 配置数据库连接信息config/db_config.js: //db_config.js module.expo ...
- Sparc V8
Sparc V8指令 在sparc V8手册中p83(Table A-1 Mapping of Synthetic Instructions to SPARC Instructions)有合成指令sy ...