使用Ajax請求下載文件Extjs4

Question

我有這個問題。 在綜合中，我有一個下載按鈕，當點擊它時，執行如下的Ajax請求：

Ext.Ajax.request({
url: 'DownloadServlet',
method: 'GET',      
});

此請求由讀取默認文件的servlet處理。 讀取文件是成功的，事實上，在firebug中，GET的狀態是“200”。

問題是前端（extjs）似乎沒有設法下載文件。 我希望瀏覽器顯示更經典的窗口來下載文件。

會是什么呢？ 謝謝

Answer 1

嘗試這個

downloadWhatever : function() {
    Ext.core.DomHelper.append(document.body, {
            tag : 'iframe',
            id : 'downloadIframe',
            frameBorder : 0,
            width : 0,
            height : 0,
            css : 'display:none;visibility:hidden;height:0px;',
            src : '/your/restful/url/'
        });
    },

服務器端彈簧（萬一你想知道）

@RequestMapping(value = "/url", method = RequestMethod.GET)
public void download(HttpServletRequest request,
        HttpServletResponse response) throws ServletRequestBindingException, IOException {
    String tempFile = .. get your file
    File file = new File(tempFile);
            // in case you have zipped it ...
            // else set the correct ContentType
    response.setContentType("application/zip");
    response.setContentLength((int) file.length());
    response.setHeader("fileName", file.getName());
    response.setHeader("Content-Disposition", "attachment; filename="+ file.getName());

    InputStream in = new FileInputStream(file);
    OutputStream out = response.getOutputStream();
    byte[] buffer = new byte[1024];
    int read = 0;
    while ((read = in.read(buffer, 0, buffer.length)) != -1) {
        out.write(buffer, 0, read);
    }

    in.close();
    out.flush();
    out.close();
}

Answer 2

您無法使用AJAX調用下載文件。 基本上有兩種解決方案：簡單易行。

簡單：只需使用window.popup或document.location.href重定向存儲文件的url，您將獲得正常的瀏覽器下載方法。 請確保您發送的mimetype哪個瀏覽器不會呈現，例如application / octet-stream

硬：您可以使用AJAX調用獲取二進制或base64編碼的文件內容，並使用base64編碼的href創建下載鏈接。 在Chrome中，它看起來像這樣：

<a href="base64,mime-type,...encoded trash..." download="download">

其他瀏覽器有一些解決方案，但目前它僅適用於Chrome。 對於其他瀏覽器，我使用的代碼如下：

var showSave;

// Feature test: Does this browser support the download attribute on anchor tags? (currently only Chrome)
var DownloadAttributeSupport = 'download' in document.createElement('a');

// Use any available BlobBuilder/URL implementation:
var BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder || window.MSBlobBuilder;
var URL = window.URL || window.webkitURL || window.mozURL || window.msURL;

// IE 10 has a handy navigator.msSaveBlob method. Maybe other browsers will emulate that interface?
// See: http://msdn.microsoft.com/en-us/library/windows/apps/hh441122.aspx
navigator.saveBlob = navigator.saveBlob || navigator.msSaveBlob || navigator.mozSaveBlob || navigator.webkitSaveBlob;

// Anyway, HMTL5 defines a very similar but more powerful window.saveAs function:
// http://www.w3.org/TR/file-writer-api/#the-filesaver-interface
window.saveAs = window.saveAs || window.webkitSaveAs || window.mozSaveAs || window.msSaveAs;
// However, this is not supported by any browser yet. But there is a compatibility library that
// adds this function to browsers that support Blobs (except Internet Exlorer):
// http://eligrey.com/blog/post/saving-generated-files-on-the-client-side
// https://github.com/eligrey/FileSaver.js

// mime types that (potentially) don't trigger a download when opened in a browser:
var BrowserSupportedMimeTypes = {
    "image/jpeg": true,
    "image/png": true,
    "image/gif": true,
    "image/svg+xml": true,
    "image/bmp": true,
    "image/x-windows-bmp": true,
    "image/webp": true,
    "audio/wav": true,
    "audio/mpeg": true,
    "audio/webm": true,
    "audio/ogg": true,
    "video/mpeg": true,
    "video/webm": true,
    "video/ogg": true,
    "text/plain": true,
    "text/html": true,
    "text/xml": true,
    "application/xhtml+xml": true,
    "application/json": true
};

// Blobs and saveAs (or saveBlob)   :
if (BlobBuilder && (window.saveAs || navigator.saveBlob)) {
    // Currently only IE 10 supports this, but I hope other browsers will also implement the saveAs/saveBlob method eventually.
    showSave = function (data, name, mimeType) {
        var builder = new BlobBuilder();
        builder.append(data);
        var blob = builder.getBlob(mimetype||"application/octet-stream");
        if (!name) name = "Download.bin";
        // I don't assign saveAs to navigator.saveBlob (or the other way around)
        // because I cannot know at this point whether future implementations
        // require these methods to be called with 'this' assigned to window (or
        // naviagator) in order to work. E.g. console.log won't work when not called
        // with this === console.
        if (window.saveAs) {
            window.saveAs(blob, name);
        }
        else {
            navigator.saveBlob(blob, name);
        }
    };
}
else if (window.Blob && URL && window.atob) {
    // atob to base64_decode the data-URI
    showSave = function (data, name, mimetype) {
        var image_data = atob(data);
        // Use typed arrays to convert the binary data to a Blob
        var arraybuffer = new ArrayBuffer(image_data.length);
        var view = new Uint8Array(arraybuffer);
        for (var i=0; i<image_data.length; i++) {
            view[i] = image_data.charCodeAt(i) & 0xff;
        }
        var blob = new Blob([arraybuffer], {type: 'application/octet-stream'});

        // Use the URL object to create a temporary URL
        var url = URL.createObjectURL(blob);
        //window.open(url, '_blank', '');
        document.location.href = url
    }
}
// Blobs and object URLs:
else if (BlobBuilder && URL) {
    // Currently WebKit and Gecko support BlobBuilder and object URLs.
    showSave = function (data, name, mimetype) {
        var blob, url, builder = new BlobBuilder();
        builder.append(data);
        if (!mimetype) mimetype = "application/octet-stream";
        if (DownloadAttributeSupport) {
            blob = builder.getBlob(mimetype);
            url = URL.createObjectURL(blob);
            // Currently only Chrome (since 14-dot-something) supports the download attribute for anchor elements.
            var link = document.createElement("a");
            link.setAttribute("href",url);
            link.setAttribute("download",name||"Download.bin");
            // Now I need to simulate a click on the link.
            // IE 10 has the better msSaveBlob method and older IE versions do not support the BlobBuilder interface
            // and object URLs, so we don't need the MS way to build an event object here.
            var event = document.createEvent('MouseEvents');
            event.initMouseEvent('click', true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
            link.dispatchEvent(event);
        }
        else {
            // In other browsers I open a new window with the object URL.
            // In order to trigger a download I have to use the generic binary data mime type
            // "application/octet-stream" for mime types that browsers would display otherwise.
            // Of course the browser won't show a nice file name here.
            if (BrowserSupportedMimeTypes[mimetype.split(";")[0]] === true) {
                mimetype = "application/octet-stream";
            }

            blob = builder.getBlob(mimetype);
            url = URL.createObjectURL(blob);
            //window.open(url, '_blank', '');
            document.location.href = url
        }
        // The timeout is probably not necessary, but just in case that some browser handle the click/window.open
        // asynchronously I don't revoke the object URL immediately.
        setTimeout(function () {
            URL.revokeObjectURL(url);
        }, 250);

        // Using the filesystem API (http://www.w3.org/TR/file-system-api/) you could do something very similar.
        // However, I think this is only supported by Chrome right now and it is much more complicated than this
        // solution. And chrome supports the download attribute anyway.
    };
}
// data:-URLs:
else if (!/\bMSIE\b/.test(navigator.userAgent)) {
    // IE does not support URLs longer than 2048 characters (actually bytes), so it is useless for data:-URLs.
    // Also it seems not to support window.open in combination with data:-URLs at all.
    showSave = function (data, name, mimetype) {
        if (!mimetype) mimetype = "application/octet-stream";
        // Again I need to filter the mime type so a download is forced.
        if (BrowserSupportedMimeTypes[mimetype.split(";")[0]] === true) {
            mimetype = "application/octet-stream";
        }
        // Note that encodeURIComponent produces UTF-8 encoded text. The mime type should contain
        // the charset=UTF-8 parameter. In case you don't want the data to be encoded as UTF-8
        // you could use escape(data) instead.
        window.open("data:"+mimetype+";base64,"+data, '_blank', '');
    };
}
// Internet Explorer before version 10 does not support any of the methods above.
// If it is text data you could show it in an textarea and tell the user to copy it into a text file.

更新：如果您可以使用Flash，這里是非Chrome瀏覽器的后備解決方案： https ： //github.com/dcneiner/Downloadify