怎么用js通过文件的url下载文件到本地

目前拿到的是文件的url,不是下载地址,只是文件的存放地址。前端怎样用js通过这个url实现文件的下载呢?

阅读 94k
评论
    12 个回答
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <a href="/download/papers/abc.doc">点击链接下载</a>
        <button onclick="download1()">点击按钮下载</button>
          <button onclick="download2">点击按钮下载</button>
    
        <script>
            // 会打开一个空白页下载,然后空白页消失,用户体验不好
            function download1() {
                window.open('/download/papers/1');
            }
          
            // 直接下载,用户体验好
            function download2() {
                var $form = $('<form method="GET"></form>');
                $form.attr('action', '/download/papers/1');
                $form.appendTo($('body'));
                $form.submit();
            }
        </script>
    </body>
    </html>
      • 267

      js文件下载, 具体可以参考http://www.zhangxinxu.com/wor...

      function funDownload(content, filename) {
          // 创建隐藏的可下载链接
          var eleLink = document.createElement('a');
          eleLink.download = filename;
          eleLink.style.display = 'none';
          // 字符内容转变成blob地址
          var blob = new Blob([content]);
          eleLink.href = URL.createObjectURL(blob);
          // 触发点击
          document.body.appendChild(eleLink);
          eleLink.click();
          // 然后移除
          document.body.removeChild(eleLink);
      };
        • 413

        如果这个url地址正确, 服务器上也确实有这个文件

        window.open(url,'_blank')

        注意, 这个url是完整地址, 需要带上协议和域名, 比如https://www.test.com/1.doc

        有更好的方法, file-saver, https://www.npmjs.com/package... 方法和高票答案的差不多, 但是兼容性更好

          location.href = 你的url,后台发的

          点击事件

            可以使用window.open,

            window.open(url)
            

            也可以创建a标签配合download属性x形如

            <a href="xxx/xxx/xx.xx" download="filename">
            

            也可以使用iframe

            function download(url){
                var iframe = document.createElement("iframe")
                iframe.style.display = "none";
                iframe.src = url;
                document.body.appendChild(iframe);
            }

              直接写一个a标签,写一个target="_blank"把url写到herf属性中去,浏览器会自动下载

                //判断浏览器类型
                function myBrowser() {

                var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
                var isOpera = userAgent.indexOf("Opera") > -1;
                if (isOpera) {
                    return "Opera"
                }; //判断是否Opera浏览器
                if (userAgent.indexOf("Firefox") > -1) {
                    return "FF";
                } //判断是否Firefox浏览器
                if (userAgent.indexOf("Chrome") > -1) {
                    return "Chrome";
                }
                if (userAgent.indexOf("Safari") > -1) {
                    return "Safari";
                } //判断是否Safari浏览器
                if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
                    return "IE";
                }; //判断是否IE浏览器
                if (userAgent.indexOf("Trident") > -1) {
                    return "Edge";
                } //判断是否Edge浏览器

                }

                //IE浏览器图片保存本地
                function SaveAs5(imgURL) {

                var oPop = window.open(imgURL, "", "width=1, height=1, top=5000, left=5000");
                for (; oPop.document.readyState != "complete";) {
                    if (oPop.document.readyState == "complete") break;
                }
                oPop.document.execCommand("SaveAs");
                oPop.close();

                }

                // 下载图片
                function oDownLoad(url) {

                if (myBrowser() === "IE" || myBrowser() === "Edge") {
                    SaveAs5(url);
                } else {
                    download(url);
                }

                }

                //谷歌,360极速等浏览器下载
                function download(src) {

                // 创建隐藏的可下载链接
                var eleLink = document.createElement('a');
                eleLink.download = src;
                eleLink.style.display = 'none';
                // // 字符内容转变成blob地址
                eleLink.href = src;
                // // 触发点击
                document.body.appendChild(eleLink);
                eleLink.click();
                // // 然后移除
                document.body.removeChild(eleLink);

                };

                  创建一个a标签,将URL写进href属性。再给这个a标签加上download属性,然后触发点击,一般浏览器就可以开启下载了。
                  有的浏览器如果你只在js中创建标签对象触发不了点击效果,这时可以把标签对象写进dom里再操作。
                  有时候会因为目标文件类型浏览器无法识别,或识别错误而引发操作失败。那么可以为a标签设置相应的type属性来修正操作。

                    a href="http://imgsrc.baidu.com/imgad/pic/item/267f9e2f07082838b5168c32b299a9014c08f1f9.jpg" download="Your_downNames" >get 这样就可以了 你可以试一下

                      • 162

                      通过html标签加载到浏览器,打开开发者工具,选择source面板,左边可以看到加载下的资源,右键保存到本地,希望能帮到你

                        • 5
                        • 新人请关照

                        推荐使用 file-saver

                          该答案已被忽略,原因:无意义的内容 - 赞、顶、同问等毫无意义的内容

                            撰写回答

                            登录后参与交流、获取后续更新提醒