前端下载文件的几种方式

前言
- 1. window.open
- 2. window.location.href
- 3. a标签
- 4. iframe
- 5. blob

前言

总结下载文件的几种方式，文件都是通过接口获取的，前端通过调用接口将接口返回的文件下载。
文件下载的方式的选择主要考虑以下几个方面：
1. 接口使用的是post请求还是get请求
2. 接口返回的是文件流还是下载的文件路由
3. 是否打开新窗口
主要是想记录一些我在实际有用到过的一些方式，欢迎补充交流

1. window.open

适用于get请求

window.open(url)

2. window.location.href

适用于get请求

window.location.href = url;

3. a标签

适用于get请求

/**
*  通过 a标签下载文件
* @param url 文件的链接
*/
export function use_a_download(url) {const link = document.createElement('a');document.body.appendChild($a);link.href = url;link.download = 'download';link.click();setTimeout(() => {if (link.remove) {link.remove();} else if (link.removeNode) {link.removeNode();}}, 20000);
}

存在的问题：1. 浏览器会直接打开图片类型和txt类型的文件而不是下载2. 跨域时，download属性失效，无法对下载的文件重命名，默认为访问路径的名字。

4. iframe

  /*** 通过 iframe 下载文件* @param url 文件的链接*/
export function use_iframe_download(url) {const $iframe = document.createElement('iframe');$iframe.style.height = '0px';$iframe.style.width = '0px';document.body.appendChild($iframe);$iframe.setAttribute('src', url);setTimeout(() => {if ($iframe.remove) {$iframe.remove();} else if ($iframe.removeNode) {$iframe.removeNode();}}, 20000);
}

5. blob

适用于get/post请求,可以传参

/**
* post请求导出列表
* @param url 访问路由
* @param data 接口参数，数组
* @param fileName 导出文件名
* @param formatStr 日期格式化
* @param method 请求类型
*/
export function use_blob_download(url, data, fileName, formatStr,method = 'post') {
axios({method,url,data,responseType: 'blob'
}).then(res => {const link = document.createElement('a');let blob = new Blob([res.data]);link.style.display = 'none';link.href = URL.createObjectURL(blob);link.setAttribute('download', fileName + new Date().format(formatStr) + '.xls');document.body.appendChild(link);link.click();document.body.removeChild(link);
});
}

存在的问题：跨域

前端下载文件的几种方式相关推荐

vue前端下载文件的2种方式
以下两种方式下载适用于后端返回了文件的url下载地址 var x = new XMLHttpRequest();x.open("GET", url, true);//url为文件的 ...
vue前端下载文件的几种方式
前端经常需要通过后端给的文件流下载各种文件,比如excel,word,压缩包等方式一:使用 window.location.href 这里限于使用get方式 window.location.href ...
Web前端下载文件的几种常见方式
1 标签or点击事件标签下载 <a href="xxxxx"> 或 <a href="xxxxx" download="xxxx& ...
java 文件下载详解_Java 从网上下载文件的几种方式实例代码详解
废话不多说了,直接给大家贴代码了,具体代码如下所示: package com.github.pandafang.tool; import java.io.BufferedOutputStream; i ...
python 下载文件-Python下载文件的11种方式
原标题:Python下载文件的11种方式在本教程中,你将学习如何使用不同的Python模块从web下载文件.此外,你将下载常规文件.web页面.Amazon S3和其他资源. 最后,你将学习如何克服 ...
Java下载文件的几种方式
public HttpServletResponse download(String path, HttpServletResponse response) {try {// path是指欲下载的文件 ...
Windows从web下载文件的几种方式
最近搞app自动化测试,需要自动从网页上下载apk用于测试,顺便学习了几种从web下载文件的方式. 一.PowerShell DownloadFile 命令 PowerShell 是一种winodws ...
前端js文件合并三种方式
最近在思考前端js文件该如何合并,当然不包括不能合并文件,而是我们能合并的文件,想了想应该也只有三种方式. 三个方式如下: 1. 一个大文件,所有js合并成一个大文件,所有页面都引用它. 2. 各个页 ...
springboot Java实现多文件的zip压缩操作 + 通过浏览器下载文件的两种方式
注只适配utf-8的场景,待完善! 压缩为zip文件通过java程序输出文件 /*** 功能:压缩多个文件成一个zip文件* @param srcfile:源文件列表* @param zipfile ...

前端下载文件的几种方式

前端下载文件的几种方式

前言

1. window.open

2. window.location.href

3. a标签

4. iframe

5. blob

前端下载文件的几种方式相关推荐

最新文章

热门文章