技术 思绪 摘录 旅行
下载文件场景很多,比如导出报表、下载资料、下载二维码等,PC端下载的时候一般效果都是新开一个窗口,下载完成之后,页面自动关闭。但是有个缺陷,如果下载文件失败,这个界面就不会关闭了,而是停留在空白页面或者报错页面,这样很不友好啊。本文就解决这个小瑕疵,实现无刷新无跳转的效果。

1、首先创建项目,生成一个页面,比如这个页面上有个下载报表的按钮。


<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
        <button>下载报表</button>
    </div>
    <script src="/JavaScript/jquery-2.1.4/jquery.min.js"></script>
</body>
</html>


2、准备后端下载action


/// <summary>
///下载文件 
/// </summary>
/// <param name="id">所需参数</param>
/// <returns>FilePathResult.</returns>
public FilePathResult Filedown(string id)
{
    //TODO 一大堆生成下载文件的代码 
    return File(Server.MapPath("/upload/zip/123.zip"), "application/octet-stream", $"{id}.zip");
}


3、修改前端页面,实现下载效果,最为关键的一步。


<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
        <button onclick="download('1234')">下载报表</button>
    </div>
    <script src="/JavaScript/jquery-2.1.4/jquery.min.js"></script>
    <script>
        var download = function (id) {
            $('<form action="/Down/Filedown" method="post">' +
                '<input type="text" name="id" value="' + id + '"/>' +
                '</form>')
                .appendTo('body').submit().remove();
        }
    </script>
</body>
</html>


4、大功告成,可以看效果了。

CarsonIT 微信扫码关注公众号 策略、创意、技术

留下您的脚步

 

最近评论

查看更多>>

友情打赏

请打开您的微信,扫一扫