js php实现无刷新下载功能
来源:凉官灰
发布时间:2020-05-06 13:32:59
阅读量:1225
js结合php实现下载功能
服务端
步骤就是,设置头文件参数,然后读入并输出文件。下面代码的file_get_contents可以使用fread,fclose代替。
download.php
1 2 3 4 5 6 7 8 | <?php
$filename = $_GET [ 'filename' ];
$path = __DIR__. "/file/" . $filename ;
header( "Content-type: application/octet-stream" );
header( "Accept-Ranges: bytes " );
header( "Accept-Length: " . filesize ( $filename ));
header( "Content-Disposition: attachment; filename={$filename}" );
echo file_get_contents ( $filename );
|
客户端
在很多时候,我们下载文件的操作,都是在前端页面直接点击下载的,而不是专门跳转到上面的download.php去下载。
所以我们需要在前端实现无刷新访问download.php来下载文件,通过隐藏的iframe来实现是不错的方式。下面是代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html>
<html>
<head>
<meta charset= "UTF-8" >
<title>Title</title>
</head>
<body>
<a href= "javascript:download_file('http://localhost/download.php?filename=\" rel=" external nofollow " 测试文件.doc\"')" >下载</a>
<script type= "text/javascript" >
function download_file(url)
{
if (typeof (download_file.iframe) == "undefined" )
{
var iframe = document.createElement( "iframe" );
download_file.iframe = iframe;
document.body.appendChild(download_file.iframe);
}
download_file.iframe.src = url;
download_file.iframe.style.display = "none" ;
}
</script>
</body>
</html>
|
file_get_contents先读取,然后echo的方式。可以使用readfile函数代替,效率更高。