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

Tclz_zhang

58866073

发布于
2017-08-03

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

javascript jquery 前端

阅读 153.3k

13 个回答

得票最新

公孙二狗

1.1k710

发布于
2017-08-04

✓ 已被采纳

<!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>

vizo

41922737

发布于
2017-08-09

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);
};

Raymond

4.3k42663

发布于
2020-07-14

分享2个大佬的解决方案，一直静静的躺在我的书签里，今天总算可以拿出来做点贡献了：

张鑫旭-JS前端创建html或json文件并浏览器导出下载
yugasun-前端js下载文件方案探索

ppyuex

4241314

发布于
2017-08-03

更新于
2018-09-04

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

window.open(url,'_blank')

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

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

抱着盒子的姑娘o

12328

发布于
2017-08-16

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

点击事件

realwugang

699119

发布于
2017-08-16

可以使用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);
}

已注销

88313352

发布于
2017-08-16

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

兜兜柱

302

发布于
2018-08-24

//判断浏览器类型
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);

};

陈丰

194

发布于
2017-08-03

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

十月安徒生

10828

发布于
2017-08-04

更新于
2017-08-04

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