点击文件下载(vue)
- a 标签的 h5 新属性 download
// filename 规定作为文件名来使用的文本。
// href 必填
<a href="balabalabala" download="filename">
但是我的文件不在网页的域名下,点击 a 标签直接显示预览页面,可以手动下载,但是这样就不可以控制文件名称了
2.参考:https://blog.csdn.net/qq_44757978/article/details/103098220
//安装
npm install downloadjs
在download.js源码发现 官网在传参时,只有一个参数,即:只有url,没有name和strType等参数
//download.js
//直接改了源码var self = window, // this script is only for browsers anyway... 这个脚本只适用于浏览器…defaultMime = "application/octet-stream", // this default mime also triggers iframe downloads 这个默认的mime也会触发iframe下载mimeType = strMimeType || defaultMime,payload = data,//直接对url 进行修改// url = !strFileName && !strMimeType && payload 改为url = payload, //改后anchor = document.createElement("a"),toString = function(a) { return String(a); },myBlob = (self.Blob || self.MozBlob || self.WebKitBlob || toString),fileName = strFileName, blob,reader;myBlob = myBlob.call ? myBlob.bind(self) : Blob;if (String(this) === "true") { //反向参数,允许下载。绑定(true,“text/xml”,“export.xml”)作为回调payload = [payload, mimeType];mimeType = payload[0];payload = payload[1];}
download.js问题之文件下载后定义的文件名问题
// 官网传参时,只有一个参数,即:只有url,没有name等参数if (url && url.length < 2048) { //if no filename and no mime, assume a url was passed as the only argument// fileName = url.split("/").pop().split("?")[0]; 改为fileName = strFileName + strMimeType; //改后 strFileName为传进来的文件名称 strMimeType为传进来的文件类型anchor.href = url; // assign href prop to temp anchorconsole.log(anchor.href, url)if (anchor.href.indexOf(url) !== -1) { // 如果浏览器确定这是一个可能有效的url路径: 如果url中有中文的字符串var ajax = new XMLHttpRequest();ajax.open("GET", url, true);ajax.responseType = 'blob';ajax.onload = function(e) {download(e.target.response, fileName, defaultMime);};setTimeout(function() { ajax.send(); }, 0); // 允许设置自定义ajax头使用返回:return ajax;} // end if valid url?} // end if url?
全局引入
// main.jsimport download from 'downloadjs'Vue.prototype.$download = download
页面使用
// aaa.vuefilesDownload (url, name) {let str=url.split("/").pop().split("?")[0]let strType=String(str.substring(str.indexOf(".")).trim())this.$download(url, name, strType)}
function aaa() {//salaryExcel 接口返回blob数据流salaryExcel({titleId: this.id}).then(res => {// type 为需要导出的文件类型,此处为xlsx表格类型const blob = new Blob( [res], {type: 'application/x-xlsx'} )// 兼容不同浏览器的URL对象const url = window.URL || window.webkitURL || window.moxURL// 创建下载链接const downloadHref = url.createObjectURL(blob)// 创建a标签并为其添加属性let downloadLink = document.createElement('a')downloadLink.href = downloadHref//this.fileName 自定义文件名称downloadLink.download = `${this.fileName}.xlsx`// 触发点击事件执行下载downloadLink.click()}).catch(err => {console.log(err)})
}
点击文件下载(vue)相关推荐
- 前端Vue点击文件下载方案
1.背景 有一个后台管理的功能:查看消息推送的日志,日志内容存储在阿里云OSS,数据库保存的是日志的存放地址,文件格式是txt,该文件格式由于浏览器支持打开,所以不会触发下载,会直接从浏览器打开, 浏 ...
- 椭圆按钮点击移动 vue实现
使用vue实现椭圆点击中心元移动 实现效果: html部分: js部分 scss部分
- 键盘点击事件 vue iview ui
KeyDown:按键下去触发事件 KeyPress:按键不松持续事件 用来捕获数字(注意:包括Shift+数字的符号).字母(注意:包括大小写).小键盘等除了F1-12.SHIFT.Alt.Ctrl. ...
- 微信上h5页面点击文件下载链接没反应,微信内直接下载app方案
大家在使用微信分享转发链接的时候,都很容易碰到链接在微信中无法打开网页的问题.通常这种情况微信会给个提示 "已停止访问该网址" ,导致这个情况的因素有以下三点. 1.分享链接被多人 ...
- 在Vue组件中获取全局的点击事件
使用场景: 在Vue组件中点击某元素之外的地方移除该元素 需求: 如上图所示,"用户列表"页面有三个Vue组件组成,分别是"菜单组件","导航组件&q ...
- vue菜单点击html,基于vue.js实现侧边菜单栏
侧边菜单栏应该是很多项目里必不可少的 自己手写了一个 下面是效果图 下面就说一下实现的过程 还是比较简单的 首先导入一下需要的文件 接下来就是我的html 主页 系统 用户管理 权限设置 操作日志 设 ...
- vue点击input框出现弹窗_vue组件实现弹出框点击显示隐藏效果
本文实例为大家分享了vue实现弹出框点击显示隐藏的具体代码,供大家参考,具体内容如下 效果如下图 由于我的更改密码弹出框是一个组件引用的,所以在一开始是隐藏的,这就需要在当前的页面上对弹出框组件设置v ...
- vue 点击按钮筛选功能_vue实现前端列表多条件筛选
本文实例为大家分享了vue实现前端列表多条件筛选的具体代码,供大家参考,具体内容如下 1.先上图: 2.搜索条件绑定的数据是: filterForm:{ schoolName:'',//输入的学校名称 ...
- vue判断是否双击_vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作...
Vue 事件处理方法 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码. v-on:click 单击事件 + + - - v-on:dblclick 双击事件 ...
最新文章
- 南京工业大学python考试题库_程序设计语言(Python程序设计)答案
- OC高级编程——深入block,如何捕获变量,如何存储在堆上
- 征途猎魔mysql数据库_猎魔征途-猎魔征途官方首测版 - 超好玩
- 2017-7-6日记
- Xtragrd 取消当前行
- 循环结束后变回去 设置一个值_VBA掌握循环结构,包你效率提高500倍
- Windows导出所有计划任务方法
- mysql-5.7.24 linux下载_Linux下安装mysql-5.7.24
- Python的Wiki
- mysql查询游标_数据库查询,游标。
- Writing A Threadpool in Rust
- cs231n课后作业(1)
- CYUSB3014 USB3.0与FPGA设计
- # Ubuntu执行sudo apt-get update提示:E: 仓库 “https://mirrors.ustc.edu.cn/ubuntu focal Release” 没有 Release
- java字符串反转reverse();
- Ubuntu 10.04 LTS 下 Android 4.1.2_r1 源代码的下载
- 全球与中国高尔夫旅游市场现状及未来发展趋势
- Linux 10GE端口,问GE和10G区别,10GE和GE区别
- “一见杨过误终身” ——体验式营销,你也可以创造传奇_营销人论坛
- Apache Ratis中的multi-raft实现原理