js通过a标签下载文件

最新推荐文章于 2024-06-25 17:58:02 发布
最新推荐文章于 2024-06-25 17:58:02 发布
阅读量8.5k 收藏 2
点赞数 1
分类专栏： 前端知识 文章标签： 文件下载
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Alive_tree/article/details/90691488
版权

最近在写文件下载，发现前端实现下载功能是依赖于浏览器特性，而非JS特性。
前端实现文件下载主要分为以下情况

1、在页面直接点击某个元素，然后另存为，弹出下载提示框
2、直接输入网址，确定，弹出下载提示框
3、点击页面的链接（a标签），弹出下载提示框
4、点击下载按钮，实现文件下载

H5给a标签新增了download,利用这个属性可以便捷的实现 下载已有的文件功能，而不需要任何插件

		<div> 
			<a href="images/zmb21.fw.png" download="images/zmb21.fw.png">文件下载</a> 
		</div>
Alive_tree
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端实现下载文件-js实现a标签下载
lifangfang0607的博客
01-19 2228
思路:使用a标签下载，点击下载时，创建a元素，模拟点击，下载完成后将a元素移除即可 // 导出文件 exportConfig(){ const content = output.replace(/(\n|\r)/gm,'\r\n') // 文件内容（此处我将后台返回的回车用正则匹配，否则txt文档中展示为空格） const filename = '下载.txt' // 文件名自定义 if("download" in document.createElement("a")){ const
使用a标签实现文件的下载与保存
a15980755772的博客
09-13 1803
<a>标签的常规使用是定义超链接，用于从一个页面链接到另一个页面，并且需要指定链接目标href，除了定义超链接外，<a>还可以实现文件的保存，直接设置a标签的href属性，但是如果文件是txt文本或者png，jpg等格式的，浏览器是直接打开文件，而不会执行下载任务，这时候需要给a标签添加一个属性：download,例如：<a href="img.png" d...
a标签实现下载文件
最新发布
小秋的博客
06-25 238
let downloadTag = document.createElement('a') downloadTag.target = '_blank' downloadTag.href = res.data document.body.appendChild(downloadTag) downloadTag.click()
js利用利用a标签下载服务器文件
u013553807的博客
05-24 278
【代码】js利用利用a标签下载服务器文件。
JS-a标签下载文件
种子不服古怪的博客
12-28 1756
目录问题描述解决方法拓展 另一种文件流下载 问题描述 昨天拿到一个需求,就是做成这种下载的模样 后台返回的下载链接长成这样 解决方法 就是一个最普通的方法,创建a标签 ,加上download属性,模拟标签点击 就可以触发下载了 注意:这个是因为直接拿到了请求链接,get请求 const SERVER_PATH = `${location.origin}/ai/aiServer/`; const alink = document.createElement('a'); alink.sty
JS获取保存对话框路径
Candy66
07-18 694
功能:实现将服务器选择的文件以ZIP压缩格式,下载到用户保存路径. 第一步:用户触发下载按钮，打开一个保存对话框，最好是能控制对话框的文件类型为.zip格式。 第二步：用户填写好保存路径及文件名，返回到JS代码中。这时要获取用户的保存路径及文件名。 第三步：调用JAVA程序，将用户选中的文件以ZIP格式压缩保存到用户填写好保存路径及文件名。 问题1：不知如何可以...
a标签下载链接的简单实现
09-28
2. **安全考虑**：为了防止恶意下载，一些浏览器可能会限制`<a>`标签的下载功能，尤其是当`href`指向JavaScript代码或其他非标准协议时。 3. **相对路径与绝对路径**：`href`属性可以接受相对路径和绝对路径。对于...
a标签调用js的方法总结
12-10
<a> 标签的 href 属性用于指定超链接目标的 URL，href 属性的值可以是任何有效文档的相对或绝对 URL，包括片段标识符和 JavaScript 代码段。 这里的href=”[removed];” rel=”external nofollow” rel=”external ...
如何点击a标签实现弹出input file上传文件对话框
09-28
在网页设计中，有时我们希望用户能够通过点击一个链接（a标签）来触发文件上传功能，而不是使用传统的`<input type="file">`标签。这种交互方式可以使界面更加友好和美观。下面我们将详细介绍如何实现这个功能，涉及...
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
10-18
这篇文档介绍了一个实用的方法，通过正则表达式实现这个功能，同时也涉及到了对`<span>`标签的处理。 首先，让我们分析问题。给定的HTML代码中包含一个`<a>`标签，它内部有一个`<span>`标签，`<a>`标签通常用于创建...
JavaScript实现获取用户单击body中所有A标签内容的方法
10-19
在`getUrl`函数内部，我们首先获取到触发事件的元素，这可能是直接被点击的A标签，也可能是包含A标签的其他元素。通过`e.target`（现代浏览器）或`e.srcElement`（旧版IE）可以获取到这个元素。 ```javascript var ...
js弹出保存对话框
08-26
js弹出保存对话框
<a>标签下载文件重命名失败，download 无效
xi_nuo的博客
03-11 9950
最近用到<a>标签实现文件下载并对文件进行重新命名，遇到了一些问题，文件重命名一直失败，所幸最终还是解决了，在此记录一下，避免后来者踩坑。 HTML <a> 元素可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接，其中href和download是我们下载文件所需要的两个属性。download可以实现对下载文件的重命名，但目前存在很大的兼容...
下载文件，并弹出保存提示框，选择位置，绝对路径 or相对路径
热门推荐
sinat_34881157的博客
06-21 2万+
下载文件，并弹出保存提示框，选择位置，绝对路径 or相对路径
点击a标签实现txt文件另存的效果
weixin_30550271的博客
06-03 302
亲测成功，使用servlet实现的，核心代码： 前台代码： function downModel(filePath){ var formFile=$("<form>"); formFile.append("<input name='fileName' style='display:none;' value='batchInsertUsersDemo.txt'/&gt...
【web】使用a 标签下载文件
michael的博客
11-14 2825
标签下载只能下载同源的文件，如果是跨域的文件，这里包括图片、音视频等媒体文件，都是预览，也无法下载。就上面的这个示例，我们点击下载，发现是跳转到了百度的首页，并没有真的下载文件。它的作用是指定下载的文件名，如果不指定，那么下载的文件名就会根据请求内容的。标签来实现文件下载，这种方式是最简单的，也是我们比较常用的方式。效果和上面的一样，都是跳转到百度的首页，没有下载文件。的最后一部分作为文件名。，那么就会使用请求的。
js：使用a标签下载图片及pdf文件等资源
mosowe
03-17 3772
一个PC端的项目（vue），开发是在google浏览器测试的，刚开始是使用的以下代码实现文件下载，图片，pdf，doc等： openDownload(link, name) { const x = new XMLHttpRequest(); x.open('GET', link, true); x.responseType = 'blob'; x.onload = function () { const url = window.URL.cre
js 用＜a＞标签实现单文件、多文件批量下载
BlizzardWu的博客
05-19 3272
简述： HTML 5 里面为 <a> 标签添加了一个 download 的属性，我们可以轻易的利用它来实现下载功能。download 的属性值是可选的，它用来指定下载文件的文件名。 1:单个文件下载 <a href="http://xxx.com/text.jpg" download="filename">Download file</a> 2:批量下载多个文件： 思路：将 url 放在一个数组里，循环数组并触发下载： var urls = [['url':'a','n
在html页面上实现弹出对话框,选择文件保存路径,js获取a标签download弹出另存为对话框的路径。...
weixin_39622710的博客
06-07 3028
在html或者jsp中弹出文件另存为的对话框，可以调用document.execCommand方法调用JS方法document.execCommand即可在前台页面调出另存为对话框，并将将服务器上存放的文件保存到本地。HTML页面另存为对话框DEMO.rar代码：functiongetimg()//另存为存放在服务器上图片到本地的方法{event.returnValue=false;show....
js a标签下载文件 改变文件类型
06-08
在JavaScript中，如果你想让用户通过`<a>`标签下载文件并更改文件类型，你需要设置`href`属性指向你要下载的文件URL，并且添加一个`download`属性，同时可以使用`contentDisposition`头来指定文件名和类型。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值