2

I have a web site that has some simple HTML pages with no images, no external CSS or JavaScript references. So the whole HTML page is a single self-containing file that has HTML code, together with inline CSS and JavaScript code. In other words, once I copy the HTML file into my Downloads folder on my mobile device, I can use it (while being offline) by loading the following into the Chrome browser:

file:///storage/emulated/0/Download/my_page.html

The problem is that I cannot download the web page from my web site into the Downloads folder using Chrome on my mobile device: When I go to:

https://my-site.tld/xxx/my_page.html

and display the page in the mobile browser, I can use the download (⭳) button on Chrome browser's tab; however it creates an .mthml file instead, with a name like this:

Title of My Page.mhtml

When I try to open this file while my mobile device is offline, none of the interactive content on the page (e.g., buttons, input boxes, etc.) is enabled. Note that my page contains interactive content that is processed locally by JavaScript contained in the page.

Currently, the only solution is to connect my mobile device to my PC (using USB for example) and copy the .html file from my PC to the mobile's Downloads file. Once I copy the .html file and open it on my mobile device using the file:///... URL as given above, the page's JavaScript works as expected (contrary to the .mhtml version).

Assuming that the .html page on my-site is updated frequently, it is tedious to download it to PC and copy over my mobile phone when I need an update. There must be a more direct way.

1 Answer 1

3

The simplest thing I can think of is to open the file you want to save as source code, which you can do from Chrome Android by prepending view-source to the URL, like so.

view-source:https://my-site.tld/xxx/my_page.html

You can then either copy and paste this code into a local file, or use the share button to open it with a compatible app of your choosing.

If this seems like too much of a pain, you might consider doing something like using PHP to determine whether the file should be viewed or downloaded. For example if the IP address of the request matches your phone, download instead of displaying the file.

<?php
/**
 * File url: https://my-site.tld/xxx/my_page.php
 *
 */

$remote_address = filter_input(INPUT_SERVER, 'REMOTE_ADDR', FILTER_SANITIZE_STRING);

if ($remote_address === '56.57.58.59') {
    header("Content-Disposition: attachment; filename=\"filename.html\"\n");
    header("Content-Type: text/html\n");
}

?>
<!-- Begin actual page content -->
<!DOCTYPE html>
<html lang="en-US">
    <meta charset="UTF-8">
    ....

Conversely, you could also simply create a separate page to allow a download regardless of the requesting IP address.

<?php
/**
 * File url: https://my-site.tld/xxx/my_page-download.php
 *
 */

header("Content-Disposition: attachment; filename=\"filename.html\"\n");
header("Content-Type: text/html\n");
readfile('path/to/file');

Additional information about the Content-Disposition header may be found in the Mozilla Developer Docs. It's not the only resource, of course, it's just my personal favorite.

6
  • 1
    Thanks Jose. The view-source, select all, copy and paste (into Total Commander's editor) method is an improvement for me...
    – FedKad
    Sep 12, 2020 at 19:32
  • 1
    My pleasure, glad to hear I could be of some help Sep 13, 2020 at 3:00
  • 1
    Please note: I upvoted this answer. But, it is not an accepted answer for me, because I am seeking for an answer on how to save an HTML file onto the file system by using only Chrome and not any other additional tool.
    – FedKad
    Sep 13, 2020 at 11:27
  • It won't work if the page is a few hundred lines.
    – Rodrigo
    Dec 16, 2020 at 4:42
  • 1
    View source shows the raw HTML that's coming from the server and not the interpreted rendered version of the page. If the page is heavy on js then the difference can be significant.
    – ccpizza
    Feb 4 at 19:15

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .