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

Tclz_zhang
  • 575

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

回复
阅读 114.3k
13 个回答
<!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>

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

如果这个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 这样就可以了 你可以试一下

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

俊宁
  • 5
新手上路,请多包涵

推荐使用 file-saver

你知道吗?

宣传栏