I want to store a file to a local machine.
For HTML5, we can use cookies and local storage to store data to a local machine.
Local storage uses key-value pairs (json) to store data.
However, I want to save data in a different format, in XML for example.
On websites such as convertonlinefree.com, when a file has been converted, the file will automatically begin downloading.
So, I am considering a way to do this:
When the user clicks a button, the XML file would automatically be downloaded. Is this possible? If so, how could I do that?
You can create invisible element, such as a and emulate click on it, to download a file, check my codepen for demo.
The important part is this:
var text = xmlContent.value;
// Create element.
a = document.createElement('a');
// Attach href attribute with value of your file.
a.setAttribute("href", "data:application/xml;charset=utf-8," + text);
// HTML5 property, to force browser to download it.
a.setAttribute("download", "my.xml");
a.click();
Optionally you can replace application/xml part with intentionally incorrect MIME type, to force browser to download file instead of trying to display it.
What you'll want to use is Data_URI_scheme which basically means you have to base64 encode your file to download it.
So something like this should work:
window.location = 'data:application/xml;base64,'+ btoa("<xml>data in the file</xml>")
Related
Good Afternoon,
Scenario: I am having pdf's file on local system and when user click the button, I want it to get downloaded. But after getting download the file on opening shows corrupted. While posting this query I notice the file which is getting download is of 1KB and original file size is 28KB. I didn't understand why ?
I am creating the excel file at backend and saving at user location as due to huge data it is taking a lot of time so once file is created, the user can download the file.
Below are the codes of JS .
function download() {
var filename="output.pdf";
var element = document.createElement('a');
var fileloc="C:\\ebooks\\PDF\\abc.pdf";
element.setAttribute('href','data:text/plain;charset=utf-8, ' +
encodeURIComponent(fileloc));
element.setAttribute('download', filename);
document.body.appendChild(element);
element.click();
}
Original file is good. Please correct me what I am doing it wrong .
The data: scheme URL you are creating resolves to a plain text document (not a PDF) containing the text C:\ebooks\PDF\abc.pdf.
You are saving this file with a .pdf extension so when you try to open it, your PDF reader tries to read it as a PDF (which it isn't).
If you want to save the contents of the file at the path you specified then you need to:
Have the user select the file using a <input type="file"> (because JS is not allowed access to files on the user's disk unless they select them explicitly and generating the URL using the FileReader.readAsDataURL() method.
If you are creating the file on the server, as you said, then there is no need to construct a data: scheme URL, you can just use the https: scheme URL that points to the file on the server.
I want to create plugin mechanizm. It is, you can load js file on my website and run your js "plugin" (function) when this plugin is set to run (toggled as running).
All this I want to do without any server.
I mean, I want to keep in localstorage js files or path to this files.
It looks to be hard to do because js can't easy access files path.
I handle file by <input type="file"/>
And I react on onchange event. I get event where I can find selected file by event.srcElement.files[0]
With that I can create URL of that object by : URL.createObjectURL(event.srcElement.files[0])
And I tried to store that URL in localstorage but this URL is temporary.
Also I tried to store whole event or just file (event.srcElement.files[0]).
But I need to create string from that if I want to put it to the function .setItem :
localStorage.setItem("functionURL", JSON.stringify(this.functionURL));
.toString() creates [Object Event/File]
JSON.stringify() creates {} from [Object Event/File]
So, maybe is there a way to somehow remember file which we can use as a function without any server ?
So, maybe is there a way to somehow remember file which we can use as a function without any server ?
Basically, no. :-) Web storage only stores strings. You can't use a string to access a file on the user's local filesystem from your web page, for obvious security reasons.
You could, instead:
Make it possible for them to "upload" the file into your page (without a server) by having them identify the file in an input[type=file], reading its text (via the File API), and then storing that text in local storage
On page load, if local storage has code to run, run it
Offer the user a way to delete or update the code they've uploaded to the page
Since all of that happens in the browser, you don't need a server.
Web storage does have size limits, though they're pretty generous, (around 2.5-5MB) and per-origin, so you have that largely to yourself. But if you run into those limits, you could take it further by caching those files via a service worker, but the complexity goes up markedly. I'd start with web storage and only move on if you really need to support massive files.
#1 (reading the script file the user identifies via an input[type=file]) is really simple on modern browsers:
var file = input.files[0];
var fr = new FileReader();
fr.onload = function() {
// Use `fr.result` here, it's a string containing the text
};
fr.readAsText(file);
Is it possible to create and save a PDF file from dataUri-string with jsPDF?
This is my saved string in the database:
var pdfAsDataUri = "data:application/pdf;base64,JVBERi0xLjUK...";
Thanks
The HTML5 download attribute allows you to specify the desidered filename.
This works only in some browsers.
http://caniuse.com/download
So instead of using
window.open("data:application/pdf;base64,JVBERi0xLjUK...");
you can create a download link:
download
To create your download link in javascript using the download attribute and downloading it directly:
var a=document.createElement('a');
a.download='FileName.pdf';
a.href=pdfAsDataUri;
a.click();
else, like i said
window.open(pdfAsDataUri);
but no filename can be specified.
Another solution is to use php and output the correct headers, a binary file and the filename.
As it's not clear which db you are using and where do you want to save the file,
btw, if i maybe didn't understand your question correctly and you want to store the pdf somewhere on the server than you need in any case some serverside programming language like php, asp, nodejs and many more.
I am using data attribute to simulate a file download from client-side JavaScript. Here's my source code :
var data = "data:application/text,anything is here";
window.location.href = data;
This works perfectly and simulates a file download. Is there any way I can specify the file name as well, as a part of the data URI or by using some other facility available from the browser?
I am aware of the download attribute of <a> tags, but I was wondering if there are any options other than the default which is to use the value of data itself as the suggested file name.
I don't believe there is a way of doing it when you are redirecting the browser like that.
If you were instead provide the download via link you could use the download attribute to suggest a filename. Not all browsers support the download attribute` at this time.
I'm developing a web app that works with video files -- specifically, I have the user 'select' their video file through a form input, I then construct a URL reference to that file, and set the <video> source to that URL. This allows me to work with user supplied content, without having to upload the video -- something that seems unnecessary, and will lead to decreased performance.
Here's my very simple code for now:
// within a change event for a file input
var videoFile = e.currentTarget.files[0];
var fileURL = URL.createObjectURL(videoFile);
var videoNode.src = fileURL;
This works great. The problem: It doesn't allow me to store a reference to this video in between user sessions. I've tried to save the fileURL into a Mongo document, and then later reload that video file... and while this works sometimes, it often breaks... with no clear consistency.
Does anyone have a good solution to storing reference to local files in between user sessions? Do I have to use something like the HTML5 Filesystem API? Localstorage?
I may have missed what you are getting at, but it sounds like you just need a cookie. http://www.w3schools.com/js/js_cookies.asp
You can save whatever file name you want in a simple cookie and then the next time they visit the page you recall the video name they want.