進度欄，用於使用JavaScript / jQuery下載文件

Question

我創建了一個頁面，可以使用JSZip插件將多個文件下載為單個zip文件。 下載文件時，瀏覽器似乎已掛起，因此我想顯示一個進度條，其中顯示了下載文件的進度。 我是JavaScript和jQuery的新手，因此無法使用在各種站點上找到的代碼。 這是我希望在代碼中使用的鏈接之一。

我想根據文件數量顯示進度。 我在每個文件上循環的每個循環都有一個。 請幫助我使用上面鏈接中的代碼。 提前謝謝了。

這是我編寫的代碼：

document.getElementById("downloadZip").addEventListener("click", function ()
        {
            sforce.connection.sessionId = '{!$Api.Session_ID}';
            var docList = JSON.parse('{!docList}');
            var checkedRecords = [];
            for(var key in docList)
            {
                if(docList.hasOwnProperty(key))
                {
                    var isSelected = document.getElementById(docList[key].docRecordId).firstChild.checked;
                    if(isSelected)
                    {
                        checkedRecords.push(docList[key]);
                    }
                }
            }
            console.log(checkedRecords);
            if(checkedRecords.length > 0)
            {
                document.getElementById("errorMessage").innerHTML = '';
                var fileIdList = [];
                for(var key in checkedRecords)
                {
                    if(checkedRecords.hasOwnProperty(key))
                    {
                        var currentFile = checkedRecords[key];
                        var fileIdMap = checkedRecords[key].docFileMap;
                        var fileId;
                        for(var j in fileIdMap)
                        {
                            fileId = fileIdMap[j];
                        }
                        fileIdList.push(fileId);
                    }
                }
                var zip = new JSZip();
                var content = null;

                for(var key in fileIdList)
                {
                    if(fileIdList.hasOwnProperty(key))
                    {
                        var query = "Select Id,Title,Description,ContentUrl,ContentDocumentId,VersionData,PathOnClient,FileType From ContentVersion WHERE Id = '" + fileIdList[key] + "'";
                        try
                        {
                            var result = sforce.connection.query(query);
                            var records = result.getArray("records");
                            var filename = records[0].PathOnClient;
                            var packCount = 1;
                            if(filename === '')
                            {
                                filename = 'ContentPack_'+packCount;
                                packCount++;
                            }
                            zip.file(filename, records[0].VersionData,{base64: true});
                        }
                        catch(err)
                        {
                            document.getElementById("errorMessage").innerHTML = 'Content Not Found - ' + err.message;
                            document.getElementById("errorMessage").style.color = 'red';
                        }
                    }
                }
                content = zip.generate({type: "blob"});
                saveAs(content, "myZip.zip");
                var sentTo = document.getElementById("ChooseSentTo").value;
                updateDocumentation(checkedRecords,sentTo);
            }
            else
            {
                document.getElementById("errorMessage").innerHTML = 'Please select a record';
                document.getElementById("errorMessage").style.color = 'red';
            }
        });

Answer 1

您不能，這取決於瀏覽器的用戶界面，而不是HTML / DOM界面中的內容，請參見注釋。我可以使用jQuery UI進度欄指示下載文件的進度嗎？

Answer 2

如果sforce來自Salesforce AJAX Toolkit，那么您將需要使用async方法 。

我強烈懷疑使用同步方法來同步ajax請求：瀏覽器UI將凍結，直到每個請求完成並且zip結果准備好為止。 即使您使用進度條，如果UI被凍結，更新也不會顯示。

有了異步請求，瀏覽器將不再凍結：它將能夠顯示進度條更新。

在下面的代碼中， fetchDataFromSForces將一個sforce調用轉換為jQuery Deferred（您需要jQuery UI，因此我假設您的頁面上有jQuery）。 手動合並異步回調可能會導致代碼丑陋，而Deferred則做到了。 我沒有復制/粘貼生成fileIdList的塊來保持此答案的可讀性，不要忘記放回去。

沒有Salesforce服務器，我將無法測試此代碼，因此可能會有一些錯別字，小錯誤等。

/**
 * Fetch data from the server asynchronously and add files in the zip.
 * @param {String} id the id of the ContentVersion to fetch.
 * @param {JSZip} zip the zip file to fill in.
 * @param {SForce} sforce the Sales Force object.
 * @return {jQuery.Deferred} the deferred containing the result.
 */
function fetchDataFromSForces(id, zip, sforce) {
    var deferred = jQuery.Deferred();
    var query = "Select Id,Title,Description,ContentUrl,ContentDocumentId,VersionData,PathOnClient,FileType From ContentVersion WHERE Id = '" + id + "'";
    sforce.connection.query(query, {
        onSuccess : function (result) {
            var currentProgress = $(".your-progressbar").progressbar("option", "value") || 0;
            currentProgress++;

            // put the result in the zip
            var records = result.getArray("records");
            var filename = records[0].PathOnClient;
            if(filename === '') {
                filename = 'ContentPack_'+currentProgress;
            }
            zip.file(filename, records[0].VersionData,{base64: true});

            // update the progress bar
            $(".your-progressbar").progressbar("option", "value", currentProgress);

            deferred.resolve(zip);
        },
        onFailure : function (error) {
            deferred.reject(error);
        }
    });
    return deferred;
}

// Create your progress bar first.
$(".your-progressbar").progressbar();

document.getElementById("downloadZip").addEventListener("click", function () {

    // ...
    // Here, the previous code here to init sforce and get fileIdList
    // ...

    var zip = new JSZip();
    var deferreds = [];

    for(var key in fileIdList) {
        if(fileIdList.hasOwnProperty(key)) {
            deferreds.push(fetchDataFromSForces(fileIdList[key], zip, sforce));
        }
    }
    // re-init the progress bar
    $(".your-progressbar").progressbar("option", "value", 0);
    $(".your-progressbar").progressbar("option", "max", fileIdList.length);
    // join all deferreds into one
    $.when.apply($, deferreds).done(function () {
        var content = zip.generate({type: "blob"});
        saveAs(content, "myZip.zip");
        var sentTo = document.getElementById("ChooseSentTo").value;
        updateDocumentation(checkedRecords,sentTo);
    }).fail(function (err) {
        document.getElementById("errorMessage").innerHTML = err.message;
        document.getElementById("errorMessage").style.color = 'red';
    });
});