vue 下载文件的两种方法

1. a标签下载

<a href="" download="">
herf: 此处要填写下载地址例如:/api/download 等,没有写域名,会自动默认项目默认域名,有多个域名的自己添加标识符
download: 一般不需要,但是用于规定作为文件名来使用的文本,特殊情况下还是需要的,所以以防万一,最好还是带上.

注意: 一般这样下载文件的都是不带token等验证的下载方法,如果必须带token,可以和后端协商在href后面拼接,然后后端去接受验证

2.通过按钮触发调用接口

<el-button @click="downloadBackup(scope.row)" type="text"  class="el-icon-download"size="small"  style="color:#93B762" :disabled="scope.row.statusStr!='成功'"> </el-button>//下载数据备份按钮downloadBackup(row) {this.download(row)}download(row) {download(row.backupFilePath).then(res => {const blob = new Blob([res.data])const fileName = row.backupFileNameconst link = document.createElement('a')link.download = fileNamelink.style.display = 'none'link.href = URL.createObjectURL(blob)document.body.appendChild(link)link.click()URL.revokeObjectURL(link.href)document.body.removeChild(link)});}

这样调用接口,不用担心token等验证问题.

注意:虽然不用担心token验证,但是一般通过接口返回的是数据,会默认在返回里面打开,只能看到完整的数据,但并不会变成下载,所以此处需要通过原生js创建一个a标签链接,设置隐藏属性以及默认点击,通过把数据转成Blob的方式,通过 URL.createObjectURL转化成href的格式被a标签识别,点击后再清除数据和a标签,谨防下次下载数据残留

       const blob = new Blob([res.data])const fileName = row.backupFileNameconst link = document.createElement('a')link.download = fileNamelink.style.display = 'none'link.href = URL.createObjectURL(blob)document.body.appendChild(link)link.click()URL.revokeObjectURL(link.href)document.body.removeChild(link)

上面是转换成blob的代码和创建标签下载的代码

踩过的坑: 按照第二种方式下载,很可能下载的文件里面只有[object,object]

在网上查了很久找到一篇文章解决
文章链接
https://www.cnblogs.com/liangxia/p/12932213.html

vue 下载文件的两种方法相关推荐

从Linux终端下载文件的2种方法
如果您坚持使用Linux终端,例如在服务器上,如何从终端下载文件? Linux中没有下载命令,但是有几个用于下载文件的Linux命令. 在这个终端技巧中,您将学习在Linux中使用命令行下载文件的两种 ...
用python下载文件的若干种方法汇总
压缩文件可以直接放到下载器里面下载的 you-get 连接下载任意文件重点用python下载文件的若干种方法汇总写文章用python下载文件的若干种方法汇总 zhangqibot发表于Met ...
合并BIN文件的两种方法
合并BIN文件的两种方法在单片机的开发过程中,经常需要将两个单独的BIN文件合并成一个文件,方便烧写和生产.下面结合STM32的IAP Bootloader Code和Application Cod ...
python如何实现下载文件_python实现下载文件的三种方法
python实现下载文件的三种方法 Python开发中时长遇到要下载文件的情况,最常用的方法就是通过Http利用urllib或者urllib2模块. 当然你也可以利用ftplib从ftp站点下载文件. ...
elf格式转换为hex格式文件的两种方法
这周工作终于不太忙了,可以写点笔记总结一下了. 之前的文章如何在Keil-MDK开发环境生成Bin格式文件,介绍了如何在Keil开发环境使用fromelf软件,将生成的axf文件转换为bin文件,这次 ...
elf格式转换为hex格式文件的两种方法 1
这周工作终于不太忙了,可以写点笔记总结一下了. 之前的文章如何在Keil-MDK开发环境生成Bin格式文件,介绍了如何在Keil开发环境使用fromelf软件,将生成的axf文件转换为bin文件,这次 ...
python下载方法-python实现下载文件的三种方法_python
本篇文章主要介绍了python实现下载文件的三种方法,最常用的方法就是通过Http利用urllib或者urllib2模块还有requests,有兴趣的可以了解一下. Python开发中时长遇到要下载文 ...
python下载的文件放在哪里的-python实现下载文件的三种方法
Python开发中时长遇到要下载文件的情况,最常用的方法就是通过Http利用urllib或者urllib2模块. 当然你也可以利用ftplib从ftp站点下载文件.此外Python还提供了另外一种方法 ...
C#读写txt文件的两种方法介绍[转]
C#读写txt文件的两种方法介绍 1.添加命名空间 System.IO; System.Text; 2.文件的读取 (1).使用FileStream类进行文件的读取,并将它转换成char数组,然后输出 ...
文字转语音文件的两种方法
文件转语音文件的两种方法.小伙伴们在日常的工作.学习或是生活当中,是否遇到过以下这种情况.在工作中每天要阅读大量文件资料,在学习中每天要阅读各种课文,在生活中也会观看各种小说.但是长时间的用眼阅读,就 ...