JavaScript中的文件下载

在JavaScript中,实现文件下载的功能可以通过多种方式实现,以下是一些常见的方法:

方法 1:使用HTML5的<a>标签

如果你已经有了一个文件的URL,可以简单地使用一个 <a> 标签并设置download属性。这可以通过JavaScript动态创建:

function downloadFile(url, fileName) {const a = document.createElement("a");a.href = url;a.download = fileName || 'download';document.body.appendChild(a);a.click();document.body.removeChild(a);
}// 使用方法
downloadFile('http://example.com/file.pdf', 'MyFile.pdf');

方法 2:使用Blob和Object URL

如果你需要下载的数据是在客户端生成的(例如,从Canvas或者生成的文本),你可以使用Blob对象:

function downloadBlob(data, fileName, mimeType) {const blob = new Blob([data], {type: mimeType});const url = window.URL.createObjectURL(blob);downloadFile(url, fileName);setTimeout(() => window.URL.revokeObjectURL(url), 1000);
}// 使用方法
downloadBlob('Hello, world!', 'hello.txt', 'text/plain');

方法 3:使用Fetch API

如果你需要从远程服务器下载文件,可以使用Fetch API来获取文件,然后使用Blob进行下载:

function fetchAndDownload(url, fileName) {fetch(url).then(response => response.blob()).then(blob => {const url = window.URL.createObjectURL(blob);downloadFile(url, fileName);setTimeout(() => window.URL.revokeObjectURL(url), 1000);}).catch(e => console.error(e));
}// 使用方法
fetchAndDownload('http://example.com/file.pdf', 'downloaded_file.pdf');

注意事项

  • 浏览器的安全限制可能会阻止某些类型的下载,特别是在没有用户交互的情况下。
  • 对于跨域资源的下载,需要确保远程服务器设置了适当的CORS(跨源资源共享)策略。
  • 在使用Blob和Object URL时,记得在适当的时候释放URL以避免内存泄漏。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/616762.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

双指针问题——求只包含两个元素的最长连续子序列(子数组)

一&#xff0c;题目描述 你正在探访一家农场&#xff0c;农场从左到右种植了一排果树。这些树用一个整数数组 fruits 表示&#xff0c;其中 fruits[i] 是第 i 棵树上的水果 种类 。 你想要尽可能多地收集水果。然而&#xff0c;农场的主人设定了一些严格的规矩&#xff0c;你必…

代码随想录 Leetcode203. 移除链表元素

题目&#xff1a; 代码(首刷看解析 2024年1月11日&#xff09;&#xff1a; class Solution { public:ListNode* removeElements(ListNode* head, int val) {if(headnullptr) return nullptr;ListNode* BeforeHead new ListNode(0,head);ListNode* temp BeforeHead;while(te…

【正点原子STM32连载】第三十一章 待机模式实验 摘自【正点原子】APM32E103最小系统板使用指南

1&#xff09;实验平台&#xff1a;正点原子APM32E103最小系统板 2&#xff09;平台购买地址&#xff1a;https://detail.tmall.com/item.htm?id609294757420 3&#xff09;全套实验源码手册视频下载地址&#xff1a; http://www.openedv.com/docs/boards/xiaoxitongban 第三…

逆向分析爬取网页动态

本例子以爬取人民邮电出版社网页新书的信息为例 由于页面是动态的&#xff0c;信息会不停地更新&#xff0c;所以不同时间的爬取结果会不同。

银行的压力测试如何进行?

为什么要进行压力风险测试&#xff1f; 压力风险测试的最终目的是测试银行在极度恶劣的市场环境中是否有足够的资本维持运转。 题主链接中的一级资本充足率(Tier 1 capital ratio) 亦即衡量标准&#xff0c;这个数字越大&#xff0c;表明银行资本约充裕&#xff0c;可以在停止…

Kubernetes (七) service(微服务)及Ingress-nginx

官网地址&#xff1a; 服务&#xff08;Service&#xff09; | Kuberneteshttps://v1-24.docs.kubernetes.io/zh-cn/docs/concepts/services-networking/service/ 一 . 网络通信原理 …

独立安全 | 企业选择系统定制化开发的最主要优势

随着信息化和互联网的迅猛发展&#xff0c;网络经济给企业带来了巨大的好处。越来越多的企业选择利用第三方平台来建设网店系统&#xff0c;这也导致竞争变得越来越激烈。另一方面&#xff0c;选择定制开发独立商城对企业也有很多好处。这些好处包括以下几点&#xff1a; 1.独…

2024年前端面试中JavaScript的30个高频面试题之基础知识

中级 高级知识 充分准备你的下一个JavaScript面试,增强信心! 无论你是老手还是刚进入技术行业,这份2024年必备资源都将帮助你复习核心概念,从基本语言特性到高级主题。 在本文中,我汇总了30个最关键的JavaScript面试题以及详细的答案和代码示例。 深入探索这宝贵的收藏,以确…

NAND Separate Command Address (SCA) 接口数据传输解读

在采用Separate Command Address (SCA) 接口的存储产品中&#xff0c;DQ input burst和DQ output burst又是什么样的策略呢&#xff1f; DQ Input Burst: 在读取操作期间&#xff0c;数据以一种快速并行的方式通过DQ总线传送到控制器。在SCA接口下&#xff0c;虽然命令和地址信…

关于Python里xlwings库对Excel表格的操作(三十一)

这篇小笔记主要记录如何【如何使用“Chart类”、“Api类"和“Axes函数”设置绘图区外框线型、颜色、粗细及填充颜色】。前面的小笔记已整理成目录&#xff0c;可点链接去目录寻找所需更方便。 【目录部分内容如下】【点击此处可进入目录】 &#xff08;1&#xff09;如何安…

【附源码】基于SSM+Java的题库管理系统的设计与实现

基于SSMJava的题库管理系统的设计与实现 &#x1f345; 作者主页 央顺技术团队 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; &#x1f345; 文末获取源码联系方式 &#x1f4dd; 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;We…

JAVA序列化

对象序列化&#xff08;object serialization&#xff09;是java支持的通用机制&#xff0c;可以将任何对象写出到流中&#xff0c;并在之后将其回读。简单来说&#xff0c;就是可以将对象数据保存为文件&#xff0c;甚至可以通过网络传输&#xff0c;在这之后或者别的主机上恢…

企业如何开展百科营销?需要创建哪些百科词条?

在营销工作实践中&#xff0c;小马识途营销顾问经常接到关于百科营销的咨询&#xff0c;现整理了最受关注的九个问题分享给热爱营销工作的小伙伴。 一、什么是百科营销&#xff1f; 百科营销是借助百科知识传播&#xff0c;可以将企业、品牌、人物所拥有的对用户有价值的信息&a…

Redis的优化

1 Redis的高可用 1.1 高可用的定义 在web服务器中&#xff0c;高可用是指服务器可以正常访问的时间&#xff0c;衡量的标准是在多长时间内可以提供正常服务&#xff08;99.9%、99.99%、99.999%等等&#xff09;。 但是在Redis语境中&#xff0c;高可用的含义似乎要宽泛一些&…

RTSP网络视频协议

一.RTSP网络视频协议介绍 RTSP是类似HTTP的应用层协议&#xff0c;一个典型的流媒体框架网络体系可参考下图&#xff0c;其中rtsp主要用于控制命令&#xff0c;rtcp主要用于视频质量的反馈&#xff0c;rtp用于视频、音频流从传输。 1、RTSP&#xff08;Real Time Streaming P…

【群晖NAS】记一次FRP报错:login to server failed: connection write timeout

报错如下&#xff1a; rongfuDS224plus:~/fff/frp$ ./frpc -c ./frpc.toml 2024/01/12 23:08:31 [I] [root.go:139] start frpc service for config file [./frpc.toml] 2024/01/12 23:08:41 [W] [service.go:131] login to server failed: i/o deadline reached 2024/01/12 2…

人工智能:未来智慧城市建设的“智慧大脑”与核心价值

目录 一、引言 二、人工智能在智慧城市中的应用实例 三、人工智能对智慧城市建设的核心价值 四、面临的挑战与未来展望 五、结语 六、附&#xff1a;智慧城市全套解决方案大合集 - 下载 一、引言 随着科技的飞速发展&#xff0c;智慧城市的概念逐渐深入人心。智慧城市利…

70、C++ - 仓库目录结构介绍

如上文所说,后面的优化基本都是基于 C++ 版本的代码来进行的,如果没有 C++ 的编程经验,可以顺便依托这个小的 C++ 项目来学一些 C++ 的基础知识。 后面涉及 C++ 部分的内容,我也会尽可能写的详细一些。 在进行 C++ 部分之前,先介绍一下 C++ 的代码仓库。 仓库链接还是在…

python爬虫实战(10)--获取本站热榜

1. 需要的类库 import requests import pandas as pd2. 分析 通过分析&#xff0c;本站的热榜数据可以直接通过接口拿到&#xff0c;故不需要解析标签&#xff0c;请求热榜数据接口 url "https://xxxt/xxxx/web/blog/hot-rank?page0&pageSize25&type" #本…

最全Linux驱动开发全流程详细解析(持续更新)

Linux驱动开发详细解析 一、驱动概念 驱动与底层硬件直接打交道&#xff0c;充当了硬件与应用软件中间的桥梁。 具体任务 读写设备寄存器&#xff08;实现控制的方式&#xff09;完成设备的轮询、中断处理、DMA通信&#xff08;CPU与外设通信的方式&#xff09;进行物理内存…