vue根据url下载文件,vue点击按钮下载文件

　　本文主要介绍在vue中点击url下载文件的最佳解决方案。通过示例代码详细介绍，对您的学习或工作有一定的参考价值。有需要的朋友可以参考一下。

目录

　　前言解决方案：代码实现注意：摘要

前言

　　这个函数在开发中经常遇到。用户上传文件或附件到服务器，后端把文件放在ftp或其他位置。前端页面有下载入口。有时候，后端会返回blob。这种情况当然是最好的，但是为了方便，后端也可能会返回文件位置的url。这个时候前端可能会遇到一些问题，比如下载文件时浏览器可能会闪烁。下载图片、json文件等浏览器支持的文件时，不会下载，而是直接在浏览器中打开。以下方法可以完美解决此类问题。

解决方案：

　　自定义封装指令将url变为粗体，并在创建标签后下载blob。

代码实现

　　在src下的directive文件夹下创建一个新目录down-load-URL down-load-URL/index . js文件/*

　　*后端返回文件的url，前端创建一个A标签下载。

　　*

　　* 1.解决了如果文件是浏览器支持的图片或格式类型，点击下载会直接打开文件，

　　* 2.下载文件时，浏览器会出现闪烁问题。

　　*

　　*在页面上使用

　　* 1.从 @/directive/down-load-URL 导入下载

　　* 2.注册指令指令：{downLoad}

　　* 3.使用，以说明的形式在按钮上下载使用。例如：El-button v-downLoad= URL downLoad/El-button

　　*/

　　从导入下载。/下载

　　const install=function(Vue) {

　　Vue.directive(downLoadUrl ，下载)

　　}

　　下载。安装=安装

　　导出默认下载

　　下载-url/downLoad.js文件

　　导出默认值{

　　bind(el，binding) {

　　el.addEventListener(click ，()={

　　console . log(binding . value)//URL

　　const a=document . createelement( a )

　　//let URL=baseURLbinding.value//If URL不完整，需要拼接baseurl。

　　Const url=binding.value //直接使用完整的url

　　//这里是把url转换成blob地址，

　　获取(URL)。然后(res=res.blob())。然后(blob={//将链接地址字符内容转换成blob地址。

　　a . href=URL . createobjecturl(blob)

　　console.log(a.href)

　　A.download= //下载文件的名称

　　//a . download=URL . split(/)[URL . split(/)。length-1]///下载文件的名称

　　document.body.appendChild(a)

　　a .单击()

　　})

　　})

　　}

　　}

注意：

　　1.如果文件的url是跨域的，下载可能会失败，因为fetch请求连接后，因为跨域而无法获取资源，所以无法进行后续操作，这就是失败。

　　2.你也可以设置一个浏览器。获取pdf、图片等资源。不要直接打开，直接下载，然后简单的创建一个A标签就可以下载了。

　　插件文件保护链接地址：https://www.jb51.net/article/238106.htm

总结

　　这就是这篇关于在vue中点击url下载文件的最佳解决方案的文章。有关在vue中点击url下载文件的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。