JS实现html页面点击下载文件（共两种实现方法）

时间：2024-11-17 15:25:41

1.使用<a>标签来完成

<a href="/user/test/" 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=//&raw=1" 
		 		download="">点击下载</a>
	</body>
</html>

其中download后面的属性是下载后文件的文件名字

如果url指向同源资源，是正常的。

如果url指向第三方资源，download会失效，表现和不使用download时一致——浏览器能打开的文件，浏览器会直接打开，不能打开的文件，会直接下载。浏览器打开的文件，可以手动下载。

解决方案一：将文件打包为.zip/.rar等浏览器不能打开的文件下载。

解决方案二：通过后端转发，后端请求第三方资源，返回给前端，前端使用file-saver等工具保存文件。

2.使用按钮进行监听

按钮监听又可以分为两种方法，

一是()

var $eleBtn1 = $("#btn1");
var $eleBtn2 = $("#btn2");
//已知一个下载文件的后端接口：/douban/douban-client//master
//方法一：()
$(function(){
    ("/douban/douban-client//master");
});

二是表单提交

//方法二：通过form
$(function(){
    var $eleForm = $("<form method='get'></form>");
    $("action","/douban/douban-client//master");
    $().append($eleForm);
    //提交表单，实现下载
    $();
});

 

相关文章