浏览器文件下载

简介: 浏览器文件下载

需求场景

通常我们将文件放在一个 URL 路径中提供下载,例如: https://www.virtualbing.cn/public/temp/123.xlsx ,浏览器访问这个地址就会下载一个 Excel 文件。在浏览器中,点击一个按钮开始下载这个文件就是我们要实现的功能。


实现方式

最简单的方式就是通过: window.open() 方法来实现下载,例如:

const url = 'https://www.virtualbing.cn/public/temp/123.xlsx';
window.open(url);点击复制复制失败已复制


这样浏览器就会打开一个新的标签页,并下载此文件。


::: danger 警告 这种方式有问题,如果要下载的文件过大,那么就会被浏览器阻止,右上角会提示禁止网页弹出弹窗! :::


接下来就是对这种方式进行优化了,优化的思路就是创建一个 DOM节点 ,类型为 a 标签,将文件 url 放到 href 属性中,之后将此元素添加到 body 中,并模拟点击,点击后再销毁此节点。


代码实现如下所示:

const downloadElement = document.createElement('a');
downloadElement.href = 'https://www.virtualbing.cn/public/temp/123.xlsx';
document.body.appendChild(downloadElement);
downloadElement.click();
document.body.removeChild(downloadElement);
目录
相关文章
|
6月前
|
Web App开发 前端开发 JavaScript
|
1月前
|
存储 机器人
在阿里云RPA中,你可以通过以下步骤来更改默认唤醒IE浏览器的地址
【2月更文挑战第28天】在阿里云RPA中,你可以通过以下步骤来更改默认唤醒IE浏览器的地址
19 1
|
7月前
|
Web App开发 XML 编解码
IE浏览器下载文件中文文件名乱码问题解决
IE浏览器下载文件中文文件名乱码问题解决
82 0
|
4月前
|
Web App开发 JavaScript 前端开发
JavaScript在IE和标准浏览器下的兼容性处理
JavaScript在IE和标准浏览器下的兼容性处理
39 0
|
5月前
|
Web App开发 移动开发 安全
IE浏览器,和Edge浏览器
IE浏览器,和Edge浏览器
|
5月前
|
JavaScript
兼容IE浏览器
兼容IE浏览器
31 0
|
6月前
|
Windows
window10 自带浏览器ie11无法启动 问题解决
这几天有一个新项目,然后再做准备工作的时候需要用到IE浏览器,然后我电脑是win10的,发现打不开IE浏览器,怎么点都没有用,后来我找找了相关资料,大家可以参考一下,毕竟出现的问题不同
170 0
|
7月前
|
编解码 网络协议 开发工具
IE浏览器下如何低延迟播放RTSP或RTMP流
首先,虽然本文是介绍IE浏览器下OCX控件播放RTSP或RTMP,但这种方式并不推荐,毕竟它只能用于IE浏览器环境下,局限太大,而且随着微软IE浏览器的更新,不确定后续支持情况。当然,话说回来,如果是在特定的使用场景下,只需要某些版本IE浏览器支持,但对延迟和稳定性要求非常高,OCX控件方式也不失为一个好的选择。
|
7月前
|
编解码 网络协议 开发工具
如何在IE浏览器播放RTSP或RTMP流
好多开发者一直苦恼于如何在IE浏览器环境下,构建低延迟的RTSP或RTMP播放,对于RTSP流来说,好多公司通常的做法是把RTSP转RTMP,然后分发到RTMP服务器,然后服务器转http-flv出来,浏览器直接播放http-flv流,亦或通过flash控件直接播放RTMP流,还有就是,转hls流出来,缺点是hls流延迟更大。
279 0
|
8月前
|
Web App开发 JavaScript
JS 获取当前浏览器类型(IE、Chrome、Edge、Firefox、Opera、UC、QQ)
JS 获取当前浏览器类型(IE、Chrome、Edge、Firefox、Opera、UC、QQ)
845 0