前端实现附件下载功能

方法一(如果是浏览器可识别的文件，可能会被直接打开)

//下载文件
function downLoadFile(fileUrl, fileName) {
    const link = document.createElement(‘a‘);
    link.href = fileUrl;
    link.download = fileName; //下载的文件名
    link.click();
},
// downLoadFile(‘name.txt‘,‘文件名‘);

方法二（通过请求的方式下载文件）

// 保存到本地并自动点击
function saveAs(data, name) {
    var urlObject = window.URL || window.webkitURL || window;
    var export_blob = new Blob([data]);
    var save_link = document.createElementNS(‘http://www.w3.org/1999/xhtml‘, ‘a‘);
    save_link.href = urlObject.createObjectURL(export_blob);
    save_link.download = name;
    save_link.click();
}
// 下载含有url的文件
function downloadUrlFile(url, fileName) {
    var url2 = url.replace(/\\/g, ‘/‘);
    var xhr = new XMLHttpRequest();
    xhr.open(‘GET‘, url2, true);
    xhr.responseType = ‘blob‘;
    //xhr.setRequestHeader(‘Authorization‘, ‘Basic a2VybWl0Omtlcm1pdA==‘);
    // 为了避免大文件影响用户体验，建议加loading
    xhr.onload = function(){
        if (xhr.status === 200) {
            // 获取文件blob数据并保存
            saveAs(xhr.response, fileName);
        }else {
            Alert(‘下载文件失败！‘)
        }
    };
    xhr.send();
}

downloadUrlFile(fileUrl, fileName);

方法三（使用H5 + plus 浏览器会报错，app则不会，亲测Hbuilder打包有效）

//提前加载plus对象
document.addEventListener(‘plusready‘,function () {},false);

var dtask = plus.downloader.createDownload(fileUrl, {}, function(d, status){
    // 下载完成
    if(status == 200){ 
        var showSize;
        var kb = Math.round(d.downloadedSize/128);
        showSize = kb + ‘kb‘;
        if(kb > 1024){
            showSize = (kb/1024).toFixed(2) + ‘M‘
        }
        Alert(d.filename +‘</br>‘+ ‘大小: ‘+showSize ,function(){},‘下载成功‘)
    } else {
        Alert(status + ‘, 文件下载失败‘,function(){},‘下载失败‘)
    }  
 });
 //dtask.addEventListener("statechanged", onStateChanged, false);
 dtask.start();

下载的文件地址：设备存储>android>data>plus.+appID(app编号)>downloads

前端实现附件下载功能

原文：https://www.cnblogs.com/baiyis/p/12594483.html