前端无刷新下载文件方法

2024-01-19 17:31:10

1、不通过后台实现直接下载

通常在上传完文件以后会把文件在项目中的相对路径存到数据库以便下载，而在页面上显示的时候通常也是一个a链接，给个href属性就可以了，例如：

<a href="/uploadfolder/xxxx.txt">点击下载</a>

但是事实上这样的话，点击这个链接，浏览器会直接打开这个文件或者调用能打开这个文件的软件来打开这个文件，只有你这个文件是一个未知文件才会下载，那怎么让txt,jpg,doc这些常用格式的文件也能直接下载呢，a标签有个“download”属性，只要加上这个属性就可以从对应的路径直接下载文件，而不是打开，并且可以指定下载文件名，例如：

<a href="/uploadfolder/xxxx.txt" download="这个文件名可以随便填(不填就是使用路径上的默认文件名).txt">点击下载</a>

注意：最近使用的时候发现IE貌似不支持这种写法，所以只能通过后台代码了。

2、通过后台实现下载

1、使用a标签

<a href="/project/download.action" target="_blank">点击下载</a>

这里target属性不给也可以，但是页面会闪一下，体验不好。

2、使用location.href属性

function downloadFile(url){
    location.href=url;
}

3、使用window.open

function downloadFile(url){
    window.open(url);
}

4、使用iframe

//javascript版本
function downloadFile(url){
var iframe = document.createElement("iframe");  
iframe.src =url;
iframe.style.display = "none";
    document.body.appendChild(iframe);  
}
//jQuery版本
function downloadFile(url){
    $("body").append($("<iframe/>").attr("src",url));
}

调用

<a href="javascript:void(0);" onclick="downloadFile('url')">点击下载</a>

码农公寓