Save As functionality in non-IE browsers

[anvi kon]

have a page, that displays a table with contents.
There is a save button. On clicking the save button i need to save the page on my local system.
I have implemented it using the document.execCommand('SaveAs')
It seems it will work only for IE.
Are there any other ways of implementing the "save as" option so that it works on all browsers.

[Bear Bibeault]

Please use more descriptive subjects for your posts, thanks. "javascript" in a forum full of JavaScript questions isn't very helpful.

And no. The ability to save the page code to the local file system is a huge, gaping hole in security that real browsers do not allow.

What may be of use to you, depending upon what you want to do, may be File System Access; see article: https://web.dev/file-system-access/

P.S. Who on earth is still using IE?

[Tim Holloway]

Bear Bibeault wrote:P.S. Who on earth is still using IE?

Who indeed. I thought it had been "edged" out.  

Next up: fart jokes. I'm just full of mature humor today.


Seriously, the "Save As" menu item on a web browser simply stores a copy of the displayed web page - usually in its original HTML and often with a sub-directory containing the page dependencies (CSS, JavaScript, images and so forth). More often what you'd really like is some sort of text document such a a Word document, Excel spreadsheet, PDF or the like. Save As cannot do that (except maybe a really crude form of PDF if you have suitable print options).

The common solution is that you'd have a "Save" or "Download" (or "Print") button on the web page that was connected to a URL which would return the document in its desired format and having a Content-Disposition header to suggest that the webapp client would want to save it on their local machine. When the client receives a response containing such a header, it can then pop up a "File Save" dialog box.

Under no circumstances is a web page supposed to be able to write out files (or print documents or do many other things) without first obtaining permission from the web client's user (dialog). That's how you get viruses. And server applications can't write directly to client filesystems either. Webapp servers aren't file servers and HTTP doesn't support access to the client's file system.

[Tim Holloway]

Incidentally, regarding the File System API.

JavaScript itself has no problems with working with filesystems or devices. The restrictions I mentioned are part of the "sandbox" built into the browser. If you write a server application using NodeJS, that app can read and write files, databases, and so forth with no problems (as long as you include the right libraries). But it can only do so on the machine that the NodeJS server itself is running on. Not on web client machines.

[anvi kon]

I tired the option window.showSaveFilePicker(), but it is saving as empty file. It overwrites with empty data. I have to save a html report.

funtion save()
{
async function getNewFileHandle() {
 const options = {
   types: [
     {
       description: 'Text Files',
       accept: {
         'text/plain': ['.txt'],
       },
     },
   ],
 };
 const handle = await window.showSaveFilePicker(options);

 return handle;
}
}

[Bear Bibeault]

If you need to save a formatted report, it's customary to have a backend process take the data and either generate a PDF-formatted report, a CSV-formatted report, or an HTML-formatted report (or options for any of the above). Setting the response headers properly makes the response a "download", which the users can then save wherever they please on their file systrm.

[anvi kon]

Thanks for the Quick response.

Do you have any example of how and where to set the response header to force download  on  the javascript ?

on my requirement, once the report generated there is Save button ,if the user clicks the save we should save the report.htm on the local drive.

right now we are using the  onclick="document.execCommand('SaveAs',true,'file.html');"

[Bear Bibeault]

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition

[anvi kon]

Do i have to add  the below code in the servlet or jsp page?

response.setContentType("APPLICATION/OCTET-STREAM");
response.setContentLength((int)file.length());
response.setHeader("Content-Disposition",


Thanks

[Bear Bibeault]

Code should never go in a JSP page.

[anvi kon]

I need to add the validation  onclick()=download(‘report.html, “”) download  download html in javascript. I added below but it us adding empty file. Can you Please help me what is wring in this

function download(filename, text) {
 var element = document.createElement('a');
 element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
 element.setAttribute('download', filename);

 element.style.display = 'none';
 document.body.appendChild(element);

 element.click();

 document.body.removeChild(element);
}