js -- 实现根据url地址下载文件

已于 2023-12-06 11:40:21 修改
阅读量3.9k 收藏
点赞数
分类专栏： 项目实操 文章标签： javascript 前端 开发语言
于 2023-07-31 15:18:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44412840/article/details/132023095
版权
本文介绍了两种使用JavaScript实现根据URL下载文件的方法。方法一利用fetch和URL.createObjectURL，方法二通过创建隐藏的a标签模拟点击下载。需要注意的是，a标签下载时存在同源限制，跨域文件无法直接下载。
摘要由CSDN通过智能技术生成

思路一：

可以使用 fetch 和 URL.createObjectURL 方法来实现根据 URL 下载文件。以下是一个示例代码：前置环节，不能存在跨域，若存在跨域，可使用 nginx 进行处理

代码：

function downloadFile(url, filename) {
   
  fetch(url)
    .then
了解本专栏 订阅专栏 解锁全文 超级会员免费看
Vue - 下载普通 URL 地址各种文件到本地
王佳斌
07-14 6679
js直接下载 url 服务器地址文件实现各种文件PDF/word/jpg/png/xls下载，Vue：a标签点击和file-saver实现文件下载，vue内点击url下载文件最佳解决方案，点击按钮下载文件URL路径，普通下载 Vue文件图片下载处理download，给a便签附下载链接,文件名和属性，如何根据后端返回的url下载json文件，file-saver 网上大部分的方法都是使用 标签，且使用 来动态创建很 繁琐且 Bug 多，您无需考虑与判断文件格式，无论遇到什么文件，都能 “丝滑” 完成下载。
js 通过URL下载PDF文件（兼容PC端、移动端大部分浏览器）
wangfei
01-06 1万+
在网上找了好多资料，最后总结下自己的实现方案，废话不多说，直接上代码 一、 第一种，后台服务器有静态资源且是固定的文件名（GET方式下载文件） window.location.href="http://www.域名/template.xlsx(文件名)" 二、第二种，后台返回文件流，前台进行读取保存 1、前端代码 /** * 文件下载（from表单单文件下载） * @param url */ function downloadFileForm(url) { var file.
js根据url或数据下载文件到本地download.js
07-07
用于js下载文件到本地,js根据url或数据下载文件到本地,使用方法见https://blog.csdn.net/mudarn/article/details/118547480?spm=1001.2014.3001.5502
JS下载文件的三种方法
热门推荐
from_the_star的博客
01-11 2万+
因为公司后端忙得无法给批量下载的api，就我们前端自己把多张图片打包成zip下载，zip打包我们用的是jszip，下面是js实现下载的三种方法： 利用HTML download 属性 var a = document.createElement('a'); //需要下载的数据内容,我这里放的就是BLOB，如果你有下载链接就不需要了 var url = wi...
js 下载文件（ url 和文件流 ）
最新发布
zhangyongxi123的博客
09-20 699
同源域名下 download 才生效，需要下载地址和项目网址域名相同。download: 修改下载文件的名称。
js文件url地址下载
weixin_44694172的博客
09-06 1444
【代码】js文件url地址下载文件
js通过 URL下载文件
u011250186的博客
01-02 3009
页面上一个button,点击之后触发一个function去请求数据,返回 pdf/epub 的URL,然后下载这个文件. 本来是直接用 a 写的,href里放资源地址,target设为'_blank'效果良好.但这样所有的资源都会直接暴露而且不方便统计,所以就换用上面的方式. js构造a标签,js触发click.不加_blank是可以的,但会替换掉原来整个页面.加了_blank chrome就拦截,Safari无效果. 用iframe,src填入资源地址. 但这样Safari无效果. ..
JS通过文件URL路径下载文件
qq_27685463的博客
07-24 8743
代码】JS通过文件URL路径下载文件。
JavaScript实现url地址自动检测并添加URL链接示例代码
12-08
背景：写一个简单的聊天系统，发出Htpp的Url实现跳转... 摘录： URL地址自动添加的实现 URL地址自动添加的实现其实就是那么点内容：检测与替换。 检测 “检测”就是检测文字（字符串）内部是否有符合http地址的内容，显
vue实践---根据不同环境,自动转换请求的url地址操作
10-14
在开发Vue应用时，往往需要面对多...总结起来，通过创建配置文件、利用Vuex和环境变量，可以实现Vue项目在不同环境中自动切换请求URL的功能。这种方式提高了开发效率，减少了错误，并确保了代码在不同环境下的正确性。
JavaScript 用fetch 实现异步下载文件功能
10-19
本文将详细解析如何使用JavaScript中的fetch API来实现文件的异步下载功能。首先，我们会介绍fetch API的基本用法，然后通过一个具体的实例代码来演示如何结合HTML和JavaScript来完成这一任务。 fetch API是现代...
js自定义方法通过隐藏iframe实现文件下载
10-27
- 通过js修改iframe的src属性，将包含文件下载链接的URL设置给iframe。 - 由于iframe是隐藏的，用户不会看到文件内容，但浏览器会处理该文件请求，并根据MIME类型自动开始下载文件。 - 实现隐藏下载的关键是创建...
通过url下载文件或图片js
wonderfulgood的博客
03-26 1072
response.msg 示例为 unzip/163/518/20240124-144926562000/7feb94adde1e45fcb634800744b4a38c.jpg。要下载图片，必须创建GET请求并将图片的URL作为请求的URL。示例为下载pdf,更换其他类型文件注意更换blob的type。2、当请求成功后，需要将响应数据保存为图片文件。1、向服务器发送HTTP请求并获取响应。
js下载url文件
enjoy.day
05-26 4063
需求 后台返回文件的URL，前端自动下载 实现 function download(url, filename){ const elelink = document.createElement("a"); elelink.style.display = 'none'; elelink.download = filename; elelink.href = url; document.body.appendChild(elelink); eleli
js下载url文件 —— 三种方法
学敲代码的Stars的博客
10-21 4903
js下载文件
js通过URL下载文件
friend_ship的博客
11-04 2612
通过URL下载文件分为两种： 1.doc，docx文件下载 2.非doc、docx文件 第一种：以下是针对doc、docx文件下载的函数 /** * url 下载文件路径 * fileName 自定义文件名称 * target 文件在何处被下载 */ export function downloadByURL({url, fileName, target}: any) { const link = document.createElement('a'); console
url-search-params-polyfill:一个简单的针对JavaScript URLSearchParams的polyfill
05-03
这是JavaScript的URLSearchParams类的polyfill库。 特征 实现了所有功能。 可以同时用于浏览器和Node.js。 检测浏览器是否完全支持URLSearchParams并将其扩展 兼容IE8及以上 安装 也可以使用npm进行安装。 $ npm...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Kingsaj

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值