通过a便签链接直接下载文件(可跨越)

最近开发项目,根据后端给定的url下载文件。实际开发中,浏览器会打开pdf文件或json文件而不会进行下载。

html5 a标签的download属性,代码中添加了此属性,可并不生效。

download浏览器兼容性

要想download属性生效出了浏览器兼容问题外,还需要符合同源策略。刚好我的项目下载地址跨域了,所以downlaod不生效。
再查找资料后,最简单的办法就是改后台服务器配置。这里我使用了nginx服务器做了测试。
nginx配置如下:l配置nginx的location遇到.pdf结尾的连接响应头增加Content-Disposition attachment;这后返回头就是告诉浏览器直接下载文件。

    server {
        # ...
        location ~* \.pdf$ {
                add_header Content-Disposition attachment;
        }
        location / {
        }
        # ...

nginx html文件夹下增加test.html,和test.pdf

<!html>
        <head>
        </head>
        <body>
                <ul>
                        <li><a href="http://127.0.0.1/test.pdf">click me!!local</a></li>
                </ul>
        </body>

</html>

html目录内容如下


htmlDir.jpg

然后启动nginx,浏览器输入localhost/test.html回车,点击clike me 连接,直接出现下载对话框。注意这里输入的host为localhost,而a标签的连接地址是127.0.0.1,所以即使跨域情况下也可以直接实现下载功能。演示效果如下:


test.html.jpg
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,793评论 19 139
  • Spring Web MVC Spring Web MVC 是包含在 Spring 框架中的 Web 框架,建立于...
    Hsinwong阅读 22,742评论 1 92
  • 我是日记星球第176号星宝宝,我正在参加日记星球第四期蜕变之旅,这是我的第54篇原创日记。如果你想在2017年获得...
    林筱芬阅读 1,950评论 0 0
  • 此开卷第0篇也。 2008年,小编开始从事企业文化相关工作,和大部分同事一样,不知道该做什么,也不知道该怎么做。到...
    欢喜慈悲阅读 3,544评论 0 1
  • 在人们的头脑里,都暗暗地埋藏着一句话,绝对不能忘记,更不能告诉别人。即使没有什么重大的含意,却也非常重要。 那句话...
    慢_慢热阅读 3,093评论 0 0