vue使用a标签下载文件_Vue a标签实现点击下载，下载图片、txt文件，不是直接打开的方式...

前段时间在项目中遇到文件需要下载，直接拿出了之前封装的下载指令，在用的时候发现在下载jpg、txt文件时，并不会直接下载，而是会在浏览器中打开文件，即使给a标签添加了download

属性，也无济于事。

我先把之前封装的指令贴出来吧，如果下载文件类型只是Exact、Word、Pdf格式的可以直接拿着用，如果有其他文件类型需求的，可以继续往文章下面看

支持Exact、Word、Pdf格式下载

let baseDownloadUrl = 'https://xxxxx.cn' // 域名

// 添加自定义v-down指令

Vue.directive('down', {

inserted: (el, binding) => {

el.style.cssText = 'cursor: pointer;color:red;'

el.addEventListener('click', () => {

console.log(binding.value)

let link = document.createElement('a') // 创建a标签

link.style.display = 'none'

link.href = baseDownloadUrl + binding.value // 设置下载地址

link.setAttribute('download', '') // 添加downLoad属性

document.body.appendChild(link)

link.click()

})

}

})

Vue页面中使用指令v-down

(附件)

当下载文件中存在jpg、txt等浏览器可以直接预览的文件时，上面的方法就会出现问题，即使加了download仍然会在浏览器中打开下载文件

我们可以将下载地址借助Blob转换成二进制，然后，作为a标签的href属性，配合download属性，实现下载。

具体实现代码如下：

Vue.directive('down', {

inserted: (el, binding) => {

el.style.cssText = 'cursor: pointer;color:write;'

el.addEventListener('click', () => {

console.log(binding.value)

let link = document.createElement('a')

let url = baseDownloadUrl + binding.value

// 这里是将url转成blob地址，

fetch(url).then(res => res.blob()).then(blob => { // 将链接地址字符内容转变成blob地址

link.href = URL.createObjectURL(blob)

console.log(link.href)

link.download = ''

document.body.appendChild(link)

link.click()

})

}

})

Vue页面中使用指令v-down

(附件)

上面的这种方法，也只是将上面的方法略做调整，将地址进行了转化，从而实现对jpg、txt 文件的下载，若有更好的办法请各位大佬指点。

vue使用a标签下载文件_Vue a标签实现点击下载，下载图片、txt文件，不是直接打开的方式...相关推荐

python怎么创建txt文件啊_搞定Python项目依赖：requirements.txt文件的创建和使用
Python的强大在于它拥有数量众多的第三方库协助开发,在编写Python项目时,我们经常会使用很多第三方模块.由于不同设备和系统的差异性,导致我们很难分散地控制项目依赖(头铁的同学请绕道),于是re ...
python读取ansi编码文件,如何在Python中同时读取ANSI和Unicode txt文件？
我是python新手,遇到了一个奇怪的问题: 当一个目录中有50个txt文件时,我希望读取每个.txt文件并将其内容保存在一个唯一的变量中,例如:**file = open(fcf[i], 'r') ...
java内存 phd文件抓取,WAS 常常有heapdump.phd和javacore.txt文件产生
WAS 经常有heapdump.***.phd和javacore.***.txt文件产生问题描述: 发现在AppSvr01下面有heapdump.***.phd和javacore.***.txt文件 ...
load导入txt文件到mysql_mysql导入数据load data infile用法(将txt文件中的数据导入表中)...
我们常常导入数据!mysql有一个高效导入方法,那就是load data infile 下面来看案例说明基本语法: load data [low_priority] [local] infile ...
深度学习制作自己的数据集—为数据集打上标签保存为txt文件，并进行划分和加载数据集
目录 0 前言 1 为图片数据集打上标签并保存为txt文件 2 将txt文件中的图片标签数据集随机划分为训练集和测试集 3 加载txt文件中的图片标签数据集 0 前言目前是被封控的第四天了,只能呆在 ...
记录关于标记工具LabelIMG生成txt文件时的相关问题
在做基于深度学习的目标检测时,对数据图片标记时出现了一些问题,特此记录一下. 在对数据图片的目标标记时,有很多的标记工具,而我钟爱LabelIMG这一工具.在此附上github链接:https://g ...
python从txt拿取数据_python requests + xpath 获取分页详情页数据存入到txt文件中
直接代码,如有不懂请加群讨论 # *-* coding:utf-8 *-* # import json import requests import pytesseract import time i ...
linux文件夹加密忘记密码,如何通过密码保护Linux上的文件夹或目录?
假设你在Linux主目录下有一个文件夹,你把不希望任何人没有密码就能访问的安全文档文件存储在里面.那样一来,即使有人设法搞到了你的计算机,进而访问主目录,仍有另外一道防线守护着你的私密文件. Cryp ...
python获取文件夹名称、文件名、去除后缀的文件名、文件改名等
当前目录下所有文件夹下的文件名(不带后缀)写入对应txt文件(以文件夹命名)中重命名文件 getfiledata.py # 当前目录下所有文件夹下的文件名(不带后缀)写入对应txt文件(以文件夹命名 ...
JAVA file列出所有文件_用Java代码列出一个目录下所有的文件
1.File类 File类在java.io.File包中,所以要导入这个包. File类中用到的方法: boolean isDirectory() 测试此抽象路径名表示的文件是否是个目录 ...

vue使用a标签下载文件_Vue a标签实现点击下载，下载图片、txt文件，不是直接打开的方式...

vue使用a标签下载文件_Vue a标签实现点击下载，下载图片、txt文件，不是直接打开的方式...相关推荐

最新文章

热门文章