vue导出文件
/**导出 */
async toExcel() {
// let result = await this.axios({
// method: 'get',
// url: `issdc-manage/gameController/export.do`,
// });
// window.open(`${this.serverUrl}/issdc-manage/gameController/export.do=${this.selectedRowKeys}`);
await this.axios({
method: 'get',
url: `entryFormController/export.do`,
data: data,
params: data,
responseType: 'blob', //返回是个文件
}).then((response) => {
download(response, data); //then直接下载,方法在下边
}); // 下载文件
function download(res) {
let blob = new Blob([res.data], { type: res.headers['content-type'] }); //type是文件类,详情可以参阅blob文件类型
// 创建新的URL并指向File对象或者Blob对象的地址 let dis = res.headers['content-disposition'];
let fileName = decodeURIComponent(dis.split('attachment;filename=')[1]);
const blobURL = window.URL.createObjectURL(blob);
// window.open(blobURL);
var downloadElement = document.createElement('a'); downloadElement.href = blobURL; downloadElement.download = fileName; document.body.appendChild(downloadElement); downloadElement.click(); document.body.removeChild(downloadElement); window.URL.revokeObjectURL(blobURL);
}
},
vue导出文件的更多相关文章
- vue Export2Excel 导出文件
使用需要引入这些js 在src目录下创建一个文件(vendor)进入Blob.js和Export2Excel.js npm install -S file-saver 用来生成文件的web应用程序 n ...
- vue项目中使用 SheetJS / js-xlsx 导出文件
1. npm install xlsx 2. 在App.vue 中引入xlsx import * as XLSX from 'xlsx'; // 数据导出导入所需要的依赖 3. 使用xlsx 3 ...
- 前端用vue怎么接收并导出文件
window.location.href = "excel地址" 如果是 get 请求,那直接换成 window.open(url) 就行了 创建一个隐藏的 iframe,把 if ...
- webpack构建vue项目(再谈配置)
webpack配置起来确实麻烦,这不,之前用刚配好了vue1+的版本,结果在(部分)安卓机上测试,发现存在开启热加载(dev-server)的情况下不能识别vue语法的问题,试了很多方法,都没能很好的 ...
- Vue组件库的那些事儿,你都知道吗?
前段时间一直在研究Vue组件库,终于在组内派上了用场.来给大家贡献一篇关于Vue组件库的相关知识.经验不多,如果有不合理的地方还请多多指出哦--- 回想一下,在你们公司或者你们小组是否有一个以上的项目 ...
- VUE (vue-cli)脚手架项目说明
1. 概述 1.1 说明 使用vue-cli快速创建的vue项目目录如下: build -- webpack相关配置以及服务启动文件,配置多依赖于下边的config文件夹中内容 config -- ...
- vue中把table导出表格excel
1.首先下载2个js,我的百度网盘有 2.安装依赖 npm install -S file-saver xlsx(这里其实安装了2个依赖) npm install -D script-loader 3 ...
- 【转】手摸手,带你用vue撸后台 系列三(实战篇)
前言 在前面两篇文章中已经把基础工作环境构建完成,也已经把后台核心的登录和权限完成了,现在手摸手,一起进入实操. Element 去年十月份开始用vue做管理后台的时候毫不犹豫的就选择了Elemen, ...
- 将 Vue 组件库发布到 npm
制作了一套自己的组件库,并发布到npm上,项目代码见 GitHub . 前期准备 有一个npm账号 安装了vue-cli 搭建项目 vue init webpack hg-vcomponents cd ...
- RAP、Mock.js、Vue.js、Webpack
最近做项目使用的是RAP1的接口,但是昨天开始,RAP1 出现了问题,接口都不能用了. 所以补充一下Mock.js的用法,以便在这种突发的情况时候时自己通过Mock的方式来处理接口. npm init ...
随机推荐
- uml类间关系总结
1. 关联关系 (1) 双向关联 顾客购买并拥有商品,商品被顾客购买,Customer和Product双向关联 (2) 单向关联 顾客拥有地址 (3) 自关联:一些类的属性对象类型是本身 (4) 多重 ...
- k8s pod 抓包
首先安装tcpdump: yum install tcpdump kubectl get pod -o wide查看pod在哪个节点上 docker ps 查看container的id 查看pid: ...
- 基于CentOS搭建FTP文件服务实战
参考教程来自腾讯云开发者实验室:https://cloud.tencent.com/developer/labs/lab/10123 话不多少,进入流程 1. 安装vsftpd 使用 yum 安装 v ...
- equals的用法的注意事项
String a="equals的用法"; String b=a.equals("equals的用法")?"相等":"不相等&qu ...
- h5py学习(一)核心概念
因pandas的to_hdf5函数有bug TypeError: object of type 'int' has no len(),写dataframe数据出现了报错,遂决定直接使用h5py来写数据 ...
- linux下第三方库的配置和链接——以opencv为例
安装OpenCV(可参考链接) 下载source到 /usr/local/路径下 新建 /build/ cmake 编译 添加库路径 vim /etc/ld.so.conf 该目录作用参考链接 输入: ...
- 记录自己在对订单进行按日期查询时使用的一种查询的方法,这里的orders是订单表,你也可以改成别的什么表对于最终数据不会造成影响,除非你那个表的数据只有几条那样就会出现查不到日期的情况
SELECT @date := DATE_ADD(@date, INTERVAL + 1 DAY) days FROM ( SELECT @date := DATE_ADD("2019-06 ...
- android 编译错误::Extension with name 'kotlin' does not exist
An exception occurred applying plugin request [id: 'kotlin-kapt']> Failed to apply plugin 'kotlin ...
- Flink Application Development DataStream API Operators Overview-- Flink应用程序开发DataStream API操作符概览
目录 概览 DataStream转换 物理分区 任务链和资源组 翻译原文- Application Development DataStream API Operators 概览 操作符将一个或多个D ...
- 互联网公司IT系统架构进化之路
一日,与一高手在茶馆聊天.他问道:在鞋厂剑派这两年,可习的什么高深的剑法?我不由一愣,细细想来,这两年每日练习的都是简单的劈砍动作和一些简练的套路.并没有去练什么高深的剑法.不过鞋厂剑派在江湖上也算小 ...