JS实现HTML页面下载文件的两种核心方式

作者:小圆点时间:2026-10-30 21:30:28浏览:342

本文介绍在HTML页面中通过JavaScript实现文件下载的两种主要方式。第一种利用带有download属性的a标签,需注意同源策略及第三方资源下载时的行为差异;第二种通过按钮监听,包括window.open和表单提交两种子方案。此外还探讨了将文本内容保存为HTML文件的实现逻辑,旨在解决无需后端协助的前端下载需求。

在HTML页面中,通过JavaScript实现文件下载功能

方法一:利用a标签实现

<a href="/user/test/xxxx.txt" rel="external nofollow"  download="文件名.txt">点击下载</a>

当用户点击浏览器中的链接时,即可触发文件下载操作。

然而,对于txt、png、jpg等浏览器原生支持直接预览的文件类型,点击链接会直接在当前窗口打开文件,而不会触发下载。此时,需要为a标签添加download属性以强制下载行为。

具体示例如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		 <a href="http://171.**.96.**:****/d/c833945c11/files/?p=/plugins.maintain.CheckLinePartTask/cebab687-6dc5-4128-b7d9-8bc2fe369598.png&raw=1" rel="external nofollow"  
		 		download="test.png">点击下载</a>
	</body>
</html>

download属性后的值指定了下载后保存的文件名。

若url指向同源资源,该机制运行正常。

若url指向第三方资源,download属性可能失效,表现与不使用该属性时一致——即浏览器能直接打开的文件类型会直接预览,无法打开的文件类型则会触发下载。对于浏览器能直接打开的文件,用户仍可手动执行下载操作。

解决方案一:将文件打包为.zip或.rar等浏览器无法直接预览的格式进行下载。

解决方案二:通过后端进行转发,由后端请求第三方资源并返回给前端,前端利用file-saver等工具保存文件。

方法二:通过按钮监听实现

按钮监听下载功能可分为两种具体实现路径,

第一种是使用window.open()方法

var $eleBtn1 = $("#btn1");
var $eleBtn2 = $("#btn2");
//已知一个下载文件的后端接口:https://codeload.github.com/douban/douban-client/legacy.zip/master
//方法一:window.open()
$eleBtn1.click(function(){
    window.open("https://codeload.github.com/douban/douban-client/legacy.zip/master");
});

第二种是通过表单提交实现

//方法二:通过form
$eleBtn2.click(function(){
    var $eleForm = $("<form method='get'></form>");
    $eleForm.attr("action","https://codeload.github.com/douban/douban-client/legacy.zip/master");
    $(document.body).append($eleForm);
    //提交表单,实现下载
    $eleForm.submit();
});

利用JS将文本内容作为HTML文件下载

实现一个简单的HTML页面下载功能,经过多种尝试发现现有方法均存在不足(部分需要后端配合,部分受跨域限制)。

具体实现步骤如下:

var eleTextarea = document.querySelector('textarea');
var eleButton = document.querySelector('input[type="button"]');
// 下载文件方法
var funDownload = function (content, filename) {
  //content是要下载页面的html代码,filename是下载后的文件名称
    var eleLink = document.createElement('a');
    eleLink.download = filename;
    eleLink.style.display = 'none';
    // 字符内容转变成blob地址
    var blob = new Blob([content]);
    eleLink.href = URL.createObjectURL(blob);
    // 触发点击
    document.body.appendChild(eleLink);
    eleLink.click();
    // 然后移除
    document.body.removeChild(eleLink);
};
//判断浏览器是否支持a标签的download属性
if ('download' in document.createElement('a')) {
    // 作为test.html文件下载
    eleButton.addEventListener('click', function () {
        funDownload(eleTextarea.value, 'test.html');    
    });
} else {
    eleButton.onclick = function () {
        alert('浏览器不支持');    
    };
}

在HTML页面中,通过JavaScript实现文件下载功能

至此,关于JS实现HTML页面文件下载(共两种实现方法)的介绍到此结束,更多相关js点击下载文件内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!

作者最新文章