Client-side data saving to hard drive - javascript

I need to save some table content in my html page frame by clicking a button. After that in "Save as" dialog box I want to select a file name and save it somewhere.. The question is how to do this. I see at least two ways. 1st one is server-side, 2nd is client-side. For some reasons I prefer to use the client-side approach. But how to do this? Which technology to prefer? Of course it needs to support most popular browsers. And somehow I need to show "Save as" dialog to the user to allow him/her to select the file location.

If I understand what you're trying to do, maybe try base64 encoding it into a data URL, then setting that as the value of the link to Save as. You can use the btoa() native function in Javascript to take a string, encode it to base64, and ask the user right-click and save link as.
<script LANGUAGE="Javascript">
function initialize(berliner) {
document.getElementById("aharef").href="data:text/plain;base64,"+btoa(berliner);
}
</script>
Just an example link. Right click and save as to save when ready.
<input type="button" value="Get ready." onClick="initialize('I am a jelly donut.');">

Short:
That is not possible on client-side.
Long:
Using standard HTML5 technologies you can only read files using the File API. The only way to really save a file programmatically to the user's hard drive is by using Microsoft's ActiveX technology (which is ugly and only works in IE).
Solution:
In your case I'd suggest to provide a button, which causes your application to create the document having the necessary formatting and send it as a download to the user.

Refining the answer by tomysshadow (which I upvoted):
<script LANGUAGE="Javascript">
function initialize(txt) {
document.getElementById("theLink").href="data:text/plain;base64,"+btoa(txt);
}
</script>
<a
id="theLink"
download="myFile.txt"
href="javascript:"
onclick="initialize('Here is the contents of the file');"
>Save</a>
With this code there is no need to prepare the download before doing it. You also do not need to right click and select Save link as. And you can specify the name of the file in the code. I tried it in Firefox only.
Try it here https://jsfiddle.net/ad3u85ym/

Related

How to Create a Save as button for an image

I'm developing a Screenshot extension for Chrome, and would like to know how could I implement a 'Save as' button in Html/Javascript. Currently users only Right Click To 'Save as'. I'm new to Javascript & didn't exactly find a way how to do it online. Any ideas? Thanks!
You can use the HTML5 download attribute, is it what you are looking for ?
<img src="http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png" alt="Stack Overflow">
<br />
<a href="http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png" download>Save !</a>
You can create a download link with Save as …. The download attribute will cause the resource to be downloaded instead of viewed in the browser.
Then, if you want the link to actually refer to the resource, use something like yourAnchorNode.href = yourImageNode.src;, or if you use a <canvas> element to display the picture (you didn’t specify it in your original question, unfortunately) use toDataURL or toBlob:
yourAnchorNode.href = yourCanvasNode.toDataURL();
or
yourCanvasNode.toBlob((blob) => yourAnchorNode.href = URL.createObjectURL(blob));
Note that toBlob is an asynchronous operation.

Preparing a page in Printer Version to be saved locally with browser "save page as..." (no server-side scripting)

I am working on an HTML page (no server-side scripting) web page with JavaScript.
That has to be modified dynamically by the user. Then I want to let the user save this page locally as a .html file.
To achieve this, I suggest the user to use the browser function "Save
page as...".
I do that because I want the user to have complete local access to this file when off-line.
The question is that I would like the user to save the page in Printer Version after I have hidden all the stuff he does not need (menus, instructions, etc.).
I have already linked the css stylesheet for printing (with "media=print") and I would like to use it to change the aspect of the page before the user save it.
(It's not possible to use an iFrame because the browser function "Save page as..." saves always an entire page.)
I ask if anybody know a way to link dynamically a new
css-stylesheet to the page that will replace the css style hiding
the unwanted css classes.
The solution must work in recent versions of browsers, not old.
You can add a new style sheet with your print rules to your document as such when needed;
$('head').append('<link rel="stylesheet" href="printerFriedly.css" type="text/css" />');

Copy the image using jquery/javascript and paste them in to word file

I have a QR Code and an Image in a div. I want to copy the QR Code and the Image by clicking a Copy button and then paste them to word file.
Is this possible using jQuery/JavaScript?
Not possible. File operations can not be done in JS/Jquery side and its not allowed by browsers(thank god!). Activex can make it possible but I don't think you want that. There the File API of HTML5 but not all browsers support.
My Suggestion would be to create WebMethod/WebService to do something like this, make ajax call to this webservice from your javascript or Jquery. User experience will remain same as you intend.

Generating image preview of a doc or pdf file

Hey guys I have searched a lot but didnt get any working solution for this problem.
I am working on a site using jsp and on this we have to upload forms in doc / docx/ pdf format. I want to generate the preview of the first page of the form. So that user can checkout whats in the form before downloading it.
Hope someone will come up with some solution for this.
Thanks
Not sure what OS platform you are on for your jsp, but my recommendation would be to have a virtual printer driver that can "print" the document at hand to an image file (or as HTML). Then you can manipulate the output of the printer driver anyway you want. Extends itself nicely to other file formats as well.
Another version of this technique would be to programatically open the document with Microsoft Word (using ole automation), then do a screen capture after the document opens. Word can load PDF files as well. You'll have to find a creative way to get the document into a Windows desktop process from your server. But it could work.
Well.. what you can do is..
Hyperlink the form names with relative paths of your jsp with download option. You need to write a servlet to download the form.. preview this jsp in pop up window.
or
use iframes in html create a div tag to preview and download the same form you are displaying. You need to write a servlet to download the form.
Make sure you set the appropriate contentType of your forms doc/pdf/jsp using response.contentType("image/jpg");
response.contentType("application/pdf");
response.contentType("application/doc");

Control PDF using javascript in web browser

I want a frame with a PDF document. The main document will use javascript to tell the PDF document what page to display and zoom level. Can this be done? If so, how or could you point me to documentation on it. Thanks.
You can't/shouldn't do it in a frame, but you can create an <object> on your page that is controllable using the JavaScript API.
http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/js_api_reference.pdf
Not easily. It all depends on what's being used to display the PDF in the browser. Not all browsers have built-in PDF viewers, and then there's many different external viewers (e.g. Acrobat, Fox-It, etc...) as well. As far as I know, there's
You can try hacking up the URL like this:
http://example.com/somedocument.pdf#page=5
but this may work in Acrobat only, as documented here: http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf
Do you need a PDF reader to be loaded and running? If not, you could write a back end script/program to render a specified page as an image (GIF, PNG, etc.) at a particular zoom level. Then your main page could load an image with something like:
<img src="render_pdf?page=4&zoom=150">
The src value could be controlled with javascript to make it dynamic.
To convert from PDF to an image in your render_pdf script, you can use ghostscript, or an image specific library like ImageMagick or GD, depending on what backend technology you are using.
Have a look at jsPDF - it may not output a .pdf onscreen in IE6 and IE7 due to limitations with datauri's, but its a good start. I dont see why this couldnt be built up in an iframe either.
As Jordan pointed out, you should use the <object> tag to embed the PDF. Then, in the PDF itself, you need to embed Javascript to handle the messages you pass in, such as:
if(!this.hostContainer.messageHandler) this.hostContainer.messageHandler = new Object();
this.hostContainer.messageHandler.onMessage = handleMessage;
function handleMessage(msg) {
// do stuff here
}
Finally, in your HTML JS, you pass messages in with:
document.getElementById('yourpdfobject').postMessage('some message or array');

Categories

Resources