Question

我很难实现简单的文件下载脚本。
这是我到目前为止，工作正常：

打开XMLHttpRequest
以blob二进制文件获取远程文件
显示下载进度

我的问题是：

创建自定义下载目录
将下载的文件重命名为原始源名称
下载的文件不包含其扩展名
是否可以在下载前添加选项以提示保存为位置？

这是片段：

    $('#DownloadBtn').click(function(e) {

        e.preventDefault();

        var urlFile = $(this).attr('href'); // remote file www.blabla.com/soft123.bin
        var fileName = ''; // Get remote file name & extension ?

        var progressBar = document.querySelector('progress');

        window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;

        function onError(e) {
            console.log('Error', e);
        }

        var xhr = new XMLHttpRequest();
        xhr.addEventListener("progress", updateProgress, false);
        xhr.open('GET', urlFile, true);
        xhr.responseType = 'blob';
        var resourceDIRLOC = "Downloads";
        xhr.onload = function(e) {
            window.requestFileSystem(TEMPORARY, 10 * 1024 * 1024, function(fs) {
                fs.root.getDirectory(fs.root.fullPath + '/' + resourceDIRLOC, {
                    create: true
                }, function(dir) {
                    resourceDIR = dir;
                    fs.root.getFile(fileName, {
                        create: true
                    }, function(fileEntry) {
                        fileEntry.createWriter(function(writer) {
                            writer.onwrite = function(e) {};
                            writer.onerror = function(e) {};
                            var blob = new Blob([xhr.response], {
                                type: ' application/octet-stream'
                            });

                            writer.write(blob);
                        }, onError);
                    }, onError);
                }, onError);
            }, onError);
        };

        function updateProgress(e) {
            if (e.lengthComputable) {
                $(progressBar).show();
                var i = (e.loaded / e.total) * 100;
                progressBar.value = i;
                if (i == 100) {
                    $(progressBar).hide();
                }
            }
        }
        xhr.send();
    });

下载的文件位于FileSystem->000->t下，00作为名称（不是soft123.bin）

我不确定是否可以让用户选择在FileSystem之外选择下载目录？如上所述，目标目录resourceDIRLOC = "Downloads"但请求不创建此文件夹？既没有给文件一个名字和扩展名任何建议表示赞赏感谢

Answer 1

以下是使用Node-Webki跟踪下载进度和选择下载目录的方法。我最初尝试使用XMLHttpRequest下载以监视下载进度，但我遇到了FileSystem API的困难。这就是我想要的工作，带有进度条的简单文件下载。希望它有所帮助。

function download(file_url) {
    var fs = require('fs');
    var url = require('url');
    var http = require('http');
    var options = {
        host: url.parse(file_url).host,
        port: 80,
        path: url.parse(file_url).pathname
    };
    var file_name = url.parse(file_url).pathname.split('/').pop();
    var file = fs.createWriteStream('./' + file_name);
    http.get(options, function(res) {
        var fsize = res.headers['content-length'];
        res.on('data', function(data) {
            file.write(data);
            progress(100 - (((fsize - file.bytesWritten) / fsize) * 100), $('#progressBar'));
        }).on('end', function() {
            file.end();
        });
    });
}

function progress(percent, $element) {
    console.log("Download: " + parseInt(percent) + " %")
    var progressBarWidth = percent * $element.width() / 100;
    $element.find('div').css("width", progressBarWidth);
}

找到答案here

使用XMLHttpRequest下载文件

1 个答案: