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.
Related
I want to create a website, where user fills out the form and after submitting I want to generate a html file for him with the data he filled and then allow him to download this file.
Is it possible with JS without server side JS?
You can create a link where href property is an encoded URI.
let exampleText ="My Name\nMy Surname\nMy Town\n"
let localfile = "data:text/plain;charset=utf-8," + encodeURIComponent(exampleText);
document.getElementById("linkfile").setAttribute("href", localfile);
<a id="linkfile" download="myInfo.txt">Click here to download</a>
If you want to do it JUST frontend side. You could use zip.js to convert those files into a zip, then convert it into a binary array, then convert it into a blob file, and prompt for download using this question.
You may have to casts your html files into DOM "File"s, this might be very slow on mobile since all processing will be done on client side.
I want to download file from external server but after renaming it. Let's say http://playtictactoe.atwebpages.com/logo.png is an image file I want to download. I have used the following HTML:
<a href="http://playtictactoe.atwebpages.com/logo.png" download="myName.png">
Download File
</a>
But this doesn't rename the file. I've read somewhere that this is because of Response Header on server. Is there any way to ignore Response Header on client side? Else guide me any other solution.
You can download the file as a buffer and resave with the file api like descriped here:
HTML5 File API downloading file from server and saving it in sandbox
Or lookup FileAPI and XMLRequest to Buffer. You download the file as binaryBuffer save it with fileAPI and rename it. This should also work in Firefox. But this is not the simple solution you are searching for. Even though it works ;-)
You can then rename the file like you want.
Cheers
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 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>")
I've been able to write JavaScript to cause the browser to download a file from a remote server using code like this:
var iframe = document.createElement("iframe");
iframe.style.display = "none";
iframe.src = "filename.zip"
document.body.appendChild(iframe);
Which works great. However, now I have a different situation where the contents of the file are stored in a string in my JavaScript on the browser side and I need to trigger a download of that file. I've tried replacing the third line above with this, where 'myFileContents' is the string containing the actual bytes of the file:
iframe.src = "data:application/octet-stream;base64," + Base64.encode(myFileContents);
This gets the file downloaded, but the file name is lost. In Chrome the file name is just 'download'. Also I've read that there are limitations to the file size allowed in some browser versions.
Is there a way to achieve this? Using JQuery would be OK. The solution needs to support any file type - zip, pdf, csv, png, jpg, xls, etc...
In some newer browsers you can use the new HTML5 download attribute on the a tag to achieve this:
var a = document.createElement('a');
a.download = "filename.txt";
a.href = "data:application/octet-stream;base64," + Base64.encode(myFileContents);
a.click();
For a future solution you could look into the HTML5 FileSystem API, but this API is not currently supported in most of the major browsers. It might not be of much use to you except for that it might provide you with another way to store the files locally if you would be OK with that. But it doesn't store the files on the users locally accessible file system, you would have to develop your own browser based interface for your users to interact with the files. Downloading the files from the HTML5 file system to the users local file system would in any case again be done using the new download attribute on an a tag, which would then refer to a location in the HTML5 file system instead of referring to an online location.
To do this with an iframe element you would have to somehow set the Content-Disposition request header on the iframe to inline; filename="filename.txt" using client side JavaScript, I don't think it is possible to do this, most likely because of security issues. If you really don't have any other option, you could kill the download speed performance by sending the string to the server using AJAX and then downloading it from there again with the right request headers set.