Download attribute allowing .html in chrome but not in firefox

user_4344420 0
Viewed 270

The following code will download htmlTest.html in Chrome, but when run in Firefox will download htmlTest.html.pdf Why does firefox add .pdf? I want to download .html as specified.

<html>
  <head> </head>
  <body>
    <button onclick="download()">Download html file</button>
    <script type="text/javascript">
      function download() {
        var element = document.createElement("a");
        var inshtml = `hello world`;
        element.setAttribute(
          "href",
          "data:text/plain;charset=utf-8," + encodeURIComponent(inshtml)
        );
        element.setAttribute("download", "htmlTest.html");

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

        element.click();

        document.body.removeChild(element);
      }
    </script>
  </body>
</html>
html javascript
2 Answers

I found the answer for FireFox. Firefox ignores the extension but looks for the MIME type. e.g. this is where the mime type is set:

        element.setAttribute(
          "href",
          "data:text/plain;charset=utf-8," + encodeURIComponent(inshtml)
        );

The change to make in my case to download a .html file I need to change the mime type (set after data: ) like so:

        element.setAttribute(
          "href",
          "data:text/html;charset=utf-8," + encodeURIComponent(inshtml)
        );

Mozilla explicitely states this at this link https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types

And here is the key quote:

Important: Browsers use the MIME type, not the file extension, to determine how to process a URL, so it's important that web servers send the correct MIME type in the response's Content-Type header. If this is not correctly configured, browsers are likely to misinterpret the contents of files and sites will not work correctly, and downloaded files may be mishandled.

It is nice of Mozilla to speak for other browsers, though incorrectly in this case as other browsers don't change the explicitly given extension when downloading .html files.

user_43444200

It is due to missing required html tags. Some Firefox releases actually ignore the whole document when tags are missing (Firefox developer edition 2020 release). Anyways I tried the code bellow and it is downloading .html on all browsers. If your Firefox still downloading as pdf, that means it is configured to do so. Make sure your firefox is configured to download html page as .html If you can do the configuration, may be you should reinstall a new browser.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button onclick="download()">Download html file</button>
    <script type="text/javascript">
      function download() {
        var element = document.createElement("a");
        var inshtml = `hello world`;
        element.setAttribute(
          "href",
          "data:text/plain;charset=utf-8," + encodeURIComponent(inshtml)
        );
        element.setAttribute("download", "htmlTest.html");

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

        element.click();

        document.body.removeChild(element);
      }
    </script>
  </body>
</html>
user_87379570
Related