封装自定义指令

将url转成bold,在创建a标签下载blob

代码实现

在src 下面的 directive 文件夹下新建目录 downLoadUrl

downLoadUrl / index.js文件

/** 后端返回文件的url,前端创建a标签来下载**  1. 解决了若文件为图片或浏览器支持的格式类型,点击下载会直接打开文件的问题,*  2. 下载文件时,浏览器会有闪动的问题**  页面内使用*  1. 引入指令 import downLoad from '@/directive/down-load-url'*  2. 注册指令 directives:{downLoad}*  3. 使用,在要下载按钮上以指令的形式使用 例如: <el-button v-downLoad="url">下载</el-button>*/import downLoad from './downLoad'const install = function(Vue) {Vue.directive('downLoadUrl', downLoad)
}downLoad.install = installexport default downLoad

downLoadUrl / downLoad.js文件

export default {bind(el, binding) {if (binding.value.url) {el.addEventListener('click', () => {const a = document.createElement('a')//   let url = baseUrl + binding.value // 若是不完整的url则需要拼接baseURLconst url = binding.value.url // 完整的url则直接使用// 这里是将url转成blob地址，fetch(url).then(res => res.blob()).then(blob => { // 将链接地址字符内容转变成blob地址a.href = URL.createObjectURL(blob)console.log(a.href)a.download = binding.value.name || '' // 下载文件的名字// a.download = url.split('/')[url.split('/').length -1] //  // 下载文件的名字document.body.appendChild(a)a.click()//在资源下载完成后 清除 占用的缓存资源window.URL.revokeObjectURL(a.href);document.body.removeChild(a);})})}}
}

在main.js注册自定义指令

使用

返回一个对象{ url: '', name: ''}

注意

1、若是文件的url存在跨域的情况，则可能会下载失败，因为fetch请求连接后，由于跨域，拿不到资源，也就无法执行后续的操作，此时是失败的。

2、也可以设置浏览器，对于一下像pdf，图片等资源不直接打开，直接下载，然后简单的创建a标签下载即可。

Vue中点击url下载文件-案例相关推荐

vue项目中点击button下载文件到浏览器
代码实现在src 下面的 directive 文件夹下新建目录 down-load-url down-load-url / index.js文件 /*index.js文件* 后端返回文件的url,前 ...
Vue 通过url下载文件并对下载的文件更名
Vue 通过url下载文件并对下载的文件更名 HTML如下: <div @click="downloadFile(url,name)">点击下载</div> ...
Vue 通过url下载文件并修改文件名称
封装一个通用的方法在需要使用的页面引入 /*** 通过url下载文件并对下载的文件更名* @param {*} url * @param {*} filename */ export const d ...
js下载文件 java_[Java教程]使用js实现点击按钮下载文件
[Java教程]使用js实现点击按钮下载文件 0 2016-11-11 19:02:54 有时候我们在网页上需要增加一个下载按钮,让用户能够点击后下载页面上的资料,那么怎样才能实现功能呢?这里有两种方 ...
HttpClient实现通过url下载文件
其实就是通过浏览器url,点击就会下载文件. 这里是从代码层面上,对文件进行下载. package main.java.com.abp.util;import org.apache.http.*; i ...
java从url下载文件_Java从URL下载文件
在这篇文章中将学习如何从java下载URL中的文件.使用java.net.URL openStream()方法从java程序中的URL下载文件.也可以使用Java NIO Channels或Java ...
python url文件名_Python –从URL下载文件
python url文件名 Downloading a File from URL is a very common task in Python scripts. A real life examp ...
win10如何使用命令行通过URL下载文件？
win10如何使用命令行通过URL下载文件? 1.启动powershell 启动powershell有多种方法,介绍两种: 方法一快捷键win+R,输入powershell,启动powershel ...
Java从指定URL下载文件并保存到指定目录
转自(留做笔记):https://www.cnblogs.com/henuyuxiang/p/11608936.html 1.基本流程当我们想要下载网站上的某个资源时,我们会获取一个url,它是服务 ...
java从url下载文件_从URL下载Java文件
java从url下载文件 Today we will learn how to download a file from URL in java. We can use java.net.URL op ...

Vue中点击url下载文件-案例

代码实现

使用

注意

Vue中点击url下载文件-案例相关推荐

最新文章

热门文章