728x90

You can save any file, or DataURL, or Blob on disk using HTML5's newly introduced "download" attribute.

Use cases:

1. Force browser to download/save files like PDF/HTML/PHP/ASPX/JS/CSS/etc. on disk
2. Concatenate all transmitted blobs and save them as file on disk - it is useful in file sharing applications

You can pass two arguments over "SaveToDisk" function:

1. file-URL or blob or data-URL - it is mandatory
2. file name - it is optional

Here is "SaveToDisk" function uses new syntax of "createEvent" API:

function SaveToDisk(fileURL, fileName) {
    // for non-IE
    if (!window.ActiveXObject) {
        var save = document.createElement('a');
        save.href = fileURL;
        save.target = '_blank';
        save.download = fileName || 'unknown';

        var event = document.createEvent('Event');
        event.initEvent('click', true, true);
        save.dispatchEvent(event);
        (window.URL || window.webkitURL).revokeObjectURL(save.href);
    }

    // for IE
    else if ( !! window.ActiveXObject && document.execCommand)     {
        var _window = window.open(fileURL, '_blank');
        _window.document.close();
        _window.document.execCommand('SaveAs', true, fileName || fileURL)
        _window.close();
    }
}

Here is "SaveToDisk" function uses old syntax of "createEvent" API:

function SaveToDisk(fileURL, fileName) {
    // for non-IE
    if (!window.ActiveXObject) {
        var save = document.createElement('a');
        save.href = fileURL;
        save.target = '_blank';
        save.download = fileName || fileURL;
        var evt = document.createEvent('MouseEvents');
        evt.initMouseEvent('click', true, true, window, 1, 0, 0, 0, 0,
            false, false, false, false, 0, null);
        save.dispatchEvent(evt);
        (window.URL || window.webkitURL).revokeObjectURL(save.href);
    }

    // for IE
    else if ( !! window.ActiveXObject && document.execCommand)     {
        var _window = window.open(fileURL, "_blank");
        _window.document.close();
        _window.document.execCommand('SaveAs', true, fileName || fileURL)
        _window.close();
    }
}

You can save blobs too; on disk:

function SaveToDisk(blobURL, fileName) {
    var reader = new FileReader();
    reader.readAsDataURL(blobURL);
    reader.onload = function (event) {
        var save = document.createElement('a');
        save.href = event.target.result;
        save.target = '_blank';
        save.download = fileName || 'unknown file';

        var event = document.createEvent('Event');
        event.initEvent('click', true, true);
        save.dispatchEvent(event);
        (window.URL || window.webkitURL).revokeObjectURL(save.href);
    };
}

Using "SaveToDisk" function

Force an image to be saved on disk instead of rendered by the browser:

SaveToDisk('https://muazkh.appspot.com/images/Curvature.PNG', 'image.png');

Force downloading of pdf files (it will NEVER allow any browser specific pdf-reader to render/open your pdf files):

SaveToDisk('https://muazkh.googlecode.com/files/Muaz-Khan-CV.pdf');

Even you can enforce following web-browser specific files to be downloaded/saved on the disk instead of rendered within the browser!

JavaScriptSaveToDisk('/javascript-file.js')
HTMLSaveToDisk('/html-file.html')
CSSSaveToDisk('/css-file.css')
ASPXSaveToDisk('/aspx-file.aspx')
PHPSaveToDisk('/php-file.php')
MVCSaveToDisk('/controller/action-method')

Following apps are using "SaveToDisk" function to save files/blobs/etc. on disk:

DataChannel.jsA library for realtime data/file sharing using WebRTC!
RTCMultiConnection.jsA library for realtime audio/video/screen/data and file sharing using WebRTC!
Group File SharingSharing files over multiple peer connections concurrently
RecordRTCA library for WebRTC-Developers to record audio and video streams

Specification

1. https://developer.mozilla.org/en-US/docs/DOM/document.createEvent
2. http://www.w3.org/TR/DOM-Level-3-Events/#events-Events-DocumentEvent-createEvent

function SaveToDisk(fileUrl, fileName) {
    var hyperlink = document.createElement('a');
    hyperlink.href = fileUrl;
    hyperlink.target = '_blank';
    hyperlink.download = fileName || fileUrl;

    var mouseEvent = new MouseEvent('click', {
        view: window,
        bubbles: true,
        cancelable: true
    });

    hyperlink.dispatchEvent(mouseEvent);
    (window.URL || window.webkitURL).revokeObjectURL(hyperlink.href);
}


Remember, "SaveToDisk" works fine on Firefox nightly and aurora.

To support Firefox general release; use same workaround that is used for IE in this post (with a little bit changes).



출처 : http://muaz-khan.blogspot.kr/2012/10/save-files-on-disk-using-javascript-or.html



(모바일 브라우저 또는 브라우저에 따라 다운로드로 작동하지 않는 경우도 있음.)

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 카카오스토리 공유하기