I want to do what Downloadify does in this other question: How do I dynamically create a document for download in Javascript?
But I would like to do it without using Flash. How can that be done?
I think the best you can do is something like this:
function addDownloadLinkTo(elem, base64data) {
var link = document.createElement('a');
var text = document.createTextNode('Download');
link.appendChild(text);
link.setAttribute('href', 'data:application/octet-stream;base64,' + base64data);
elem.appendChild(link);
}
Or if you're using jQuery,
$(elem).append($('Download');
where base64data can be obtained as in this question.
Unfortunately, data URIs do not yet (AFAIK) provide a mechanism to specify the file name; also, might not work in all browsers.
Related
After browsing around the internet for a few hours to find a solution, I found out a few methods of getting the information from a filereader, but not quite to what I need.
function submitfile() {
var reader = new FileReader();
reader.readAsDataURL(document.getElementById("filesubmission").files[0]);
reader.onload = function (REvent) {
document.getElementById("outputcontent").innerHTML = "<iframe width='100%' id='outputdata' scrolling='yes' onload='resizeIframe(this)' src='"+REvent.target.result+"'></iframe>";
};
}
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
That is the code that I'm using after a user selects a file, which I allow .html, .htm, .txt, or .xml. The Iframe is then resized to match the content. I have that functionality working, however I need to have a method of replacing text in the iframe with certain values that the user provides in <input> tags earlier. An example would be I need to be able to replace "[c1]" in the file the user provides with a client's name, such as "John Smith".
The way I would prefer to do this would be through the content of the file itself, rather than using a source in an iframe or data in an object. If I can get this into the original file itself where it can be edited, that would solve the problem.
I need to be able to do this without the use of jQuery or other plugins, since this is a local file that should be able to work standalone as a tool for my client.
Use the DOMParser to parse the reader's result:
var doc = (new DOMParser).parseFromString(reader.result,"text/html");
or any other mime type,
Then, update the some nodes within the doc based on the inputs you mention.
Then use the iframe's contentDocument to adopt the node using document.adoptNode. That will return the node with its ownerDocument pointing to the iframe. Lastly append it to the iframe's body.
I am trying to download a CSV file from json data stored in a variable.
The issue is that I am not able to set the name of the downloaded file.
Here is the code...
$('#downloadCSV').click(function () {
var exportData = 'data:attachment/csv;charset=utf-8,';
exportData += 'nodeid,value\n1,212\n';
var newWindow = window.open(encodeURI(exportData));
return false;
});
I have already tried to add the HTML5 download attr:
<a id="downloadCSV" download="data.csv" href="#">Download CSV</a>
I have already tried the solutions provided by others and nothing is working with the current browsers ...
I find the FileSaver library a really useful cross-browser solution for saving files from JavaScript. Their documentation provides a compatibility table which will show you which browsers support file names.
BTW the download attribute on the <a> tag is an HTML5 feature which would apply if you were linking to a file's URL directly with the href. As you are catching the click event using JavaScript, and then returning false, this will not be doing anything.
I want to be able to create base64 files (images, sounds, video) without any previous models. For example, if I want to create a base64 64px*64px red image, how can I do this without creating first a canvas?
I would also like to create a sound (note) with no model.
I've searched on Google for some documentation on base64 encoding but I did not seem to find specific things for my need.
I am going to use Javascript, but I guess this should be the same for every language.
Try
function createFile(_data) {
var _data = ["<!doctype html>",
"<img style=width:64px;height:64px;"
+ "background-color:red;display:block; />"];
var data = window.btoa(_data.join("").toString());
var file = "data:text/html;base64," + data;
return file
};
createFile();
jsfiddle http://jsfiddle.net/guest271314/6GPju/
see also http://www.w3.org/TR/FileAPI/ , https://developer.mozilla.org/en-US/docs/Web/API/Window.btoa
I would like to generate a text file in the javascript dynamicly, then offer this for download. Currently I can get this working to a degree with either of the following solutions:
content = "abc123";
document.location = "data:text/octet-stream," + encodeURIComponent(content);
OR
content = "abc123";
var bb = new BlobBuilder();
bb.append(content);
var blob = bb.getBlob();
blob = blob.slice(0, blob.size, 'text/octet-stream');
var fr = new FileReader();
fr.onload = function() {document.location = this.result;}
fr.readAsDataURL(blob);
However, Both of these solutions, when the download box appears, will only offer a default filename of 'download' in the save as dialogue.
My question is basically, how can I change this to a specific filename for example 'readme.txt' or 'scene.obj'
Also note the data type was previously 'text/plain' however if this is used, the document switches to the new text document instead of offering it for download (as text/octet-stream seems to do).
I do not want a flash solution, javascript/html5 only suggestions please.
Cheers, Josh
For that, you will have to use FileSaver from FileAPI: Writer specification.
For now, it's only a draft, and according to mailing list answer it isn't yet implemented in browsers.
You can watch for example on a chromium issue to get up-to-date information about the implementation progress
UPD 02.08.2013: I have since found a project that provides FileSaver interface using neat tricks
I think you should check: jQuery Table to CSV export
I want to use the HTML5 FileApi to read a SWF to an OBJECT (or EMBED, if it's better to do?).
My current code crashes on Chrome/Iron (the only stable browser which also supports the xmlhttprequest v2 FormData). I got it to read image data into a on-the-fly created IMG. But the object one crashes the current tab in the browser.
else if (file.type == "application/x-shockwave-flash") {
var show = document.createElement("object");
show.type = "application/x-shockwave-flash"
show.style.width = "100%";
show.style.height = "100%";
show.id = "thumb";
document.getElementById("thumbnails").appendChild(show);
var reader = new FileReader();
reader.onload = (function (aImg) {
return function (e) { aImg.data = e.target.result; };
})(show);
reader.readAsDataURL(file);
Do I really read to the object.data part? How is it done right? Anybody know? Or is this incomplete and I have to wait for better implementation?
A few things I'd recommend trying (in order of increasing complexity):
base64 encode the data with btoa and set it using a data: URI,
instead of creating the object using createElement, construct the <object> tag with all attributes as an HTML string (including the base64 advice above), then inject it into a DOM element with innerHTML,
create a reflector web service where you POST the swf content, it gives you a URL, then pass the URL off to the object,
similar to the previous, create a reflector web service where you POST the swf content, targeting a full-screen IFRAM as the target, have the service spits back an HTML doc including an <object> pointing back to the server.
The later of these options is more intense, and requires round-trips from the server that you'd probably want to avoid - just some more options you might want to consider.
ActionScript 3 has a Loader which may be useful as well. I don't know if it supports data: URI's, but if it does, you could write a boot loader SWF which runs the contents of the local swf file directly.