CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-extensionfacebook-javascript-sdkdom-events
Praveen
Praveen

Reputation: 1851

Create a file using Javascript in Chrome on client side

I would like to know if I can create a text file and save the file in the users "Downloads" section in his/her computer using Javascript. The way my feature should work is when the user clicks the submit button, I populate the users info in the text file and then save it in his machine. I would like this to work in Google Chrome.

Is this possible? I have seen posts that specifically tell me that it is a serious security issue.

Upvotes: 32

Views: 66670

Answers (9)

pimvdb
pimvdb

Reputation: 154918

Sure you can, using the brand new APIs.

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

 window.requestFileSystem(window.TEMPORARY, 1024*1024, function(fs) {
    fs.root.getFile('test.bin', {create: true}, function(fileEntry) { // test.bin is filename
        fileEntry.createWriter(function(fileWriter) {
            var arr = new Uint8Array(3); // data length

            arr[0] = 97; // byte data; these are codes for 'abc'
            arr[1] = 98;
            arr[2] = 99;

            var blob = new Blob([arr]);

            fileWriter.addEventListener("writeend", function() {
                // navigate to file, will download
                location.href = fileEntry.toURL();
            }, false);

            fileWriter.write(blob);
        }, function() {});
    }, function() {});
}, function() {});

Upvotes: 42

giablu82
giablu82

Reputation: 1

This link helped me a lot and solved my problem. Cross browser solution:

https://www.thewebflash.com/reading-and-creating-text-files-using-the-html5-file-api/

This is the most relevant part:

if ('msSaveOrOpenBlob' in navigator) {

    navigator.msSaveOrOpenBlob(textFileAsBlob, fileName);
} else {
    var downloadLink = document.createElement('a');
    downloadLink.download = fileName;
    downloadLink.innerHTML = 'Download File';
    if ('webkitURL' in window) {
        // Chrome allows the link to be clicked
        // without actually adding it to the DOM.
        downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
    } else {
        // Firefox requires the link to be added to the DOM
        // before it can be clicked.
        downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
        downloadLink.onclick = destroyClickedElement;
        downloadLink.style.display = 'none';
        document.body.appendChild(downloadLink);
    }

    downloadLink.click();
}

Upvotes: -2

dsrdakota
dsrdakota

Reputation: 2583

Try this:

document.body.innerHTML+="<a id='test' href='data:text;charset=utf-8,"+encodeURIComponent("hi")+"'>Your Download</a>";
document.getElementById('test').click();

if you want to set the filename use download attribute of anchor tag:

document.body.innerHTML+="<a id='test' href='data:text;charset=utf-8,"+encodeURIComponent("hi")+"' download=yourfilename>Your Download</a>";
document.getElementById('test').click();

Upvotes: 5

Sushama Pradhan
Sushama Pradhan

Reputation: 1

var isIE = /*@cc_on!@*/ false || !! document.documentMode; // At least IE6
var uri = "some data"; //data in file
var fileName = "file.i4cvf"; // any file name with any extension
if (isIE) {
    var fileData = ['\ufeff' + uri];
    var blobObject = new Blob(fileData);
    window.navigator.msSaveOrOpenBlob(blobObject, fileName);
} else //chrome
{
    window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
    window.requestFileSystem(window.TEMPORARY, 1024 * 1024, function (fs) {
        fs.root.getFile(fileName, {
            create: true
        }, function (fileEntry) {
            fileEntry.createWriter(function (fileWriter) {
                var fileData = ['\ufeff' + uri];
                var blob = new Blob(fileData);
                fileWriter.addEventListener("writeend", function () {
                    var fileUrl = fileEntry.toURL();
                    var link = document.createElement('a');
                    link.href = fileUrl;
                    link.download = fileName;
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                }, false);
                fileWriter.write(blob);
            }, function () {});
        }, function () {});
    }, function () {});
}

Upvotes: -2

dinesh ygv
dinesh ygv

Reputation: 1890

The following method works in IE11+, Firefox 25+ and Chrome 30+:

<a id="export" class="myButton" download="" href="#">export</a>
<script>
    function createDownloadLink(anchorSelector, str, fileName){
        if(window.navigator.msSaveOrOpenBlob) {
            var fileData = [str];
            blobObject = new Blob(fileData);
            $(anchorSelector).click(function(){
                window.navigator.msSaveOrOpenBlob(blobObject, fileName);
            });
        } else {
            var url = "data:text/plain;charset=utf-8," + encodeURIComponent(str);
            $(anchorSelector).attr("download", fileName);               
            $(anchorSelector).attr("href", url);
        }
    }

    $(function () {
        var str = "hi,file";
        createDownloadLink("#export",str,"file.txt");
    });

</script>

See this in Action: http://jsfiddle.net/Kg7eA/

Firefox and Chrome support data URI for navigation, which allows us to create files by navigating to a data URI, while IE doesn't support it for security purposes.

On the other hand, IE has API for saving a blob, which can be used to create and download files.

Upvotes: 7

James Andino
James Andino

Reputation: 25789

Enter this into the Chrome browser

data:text;charset=utf-8,helloWorld

So to construct the download for your users you would do something like

data='<a href='data:text;charset=utf-8,'+uriEncode(yourUSERdataToDownload)+' >Your Download</a>

Then inject it into the dom for your user to press.

Upvotes: 11

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 175048

No, as that would allow you to create malicious programs in the client's computer, and harm his privacy.

Also, requests to download files come from the server, so you'll need to create the file on the server, and serve it to the user, and hope he'll save it (if he requested for it it's likely that he will).

Another possible solution to look at is to use data URIs or CSVs, but browser support for them is incomplete (IE), see Create a file in memory for user to download, not through server

Upvotes: 0

vicky
vicky

Reputation: 895

On Submit button from user, you can create file on server and redirect user to url of the file, from where it should get automatically downloaded.

Upvotes: 0

nonouco
nonouco

Reputation: 1170

You will need server side functionality in order to server the user a text file (javascript is not enough). You can create a server side script that creates the file and use javascript in order to prompt user to save it.

Upvotes: 0

Related Questions