0

I'm currently building a test website and trying to implement a download link for a file (.txt). I've seen many different ways of doing it in particular on Stack. However nothing seems to be working. It always opens the files instead of downloading it.

Here is the code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test - Download</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <img src="logo.png" alt="test Logo">
        <div class="spacer"></div>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="team.html">Team</a></li>
                <li><a href="#">Download</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h1>Download </h1>
        <p>Choose your platform:</p>
        <ul>
            <li>
                <a href="img/A.png" download="bottle"> Download </a> <!-- THIS IS NOT WORKING-->
            </li>
            <li><a href="#">Mac</a></li>
            <li><a href="#">Linux</a></li>
        </ul>
    </main>
    <footer>
        <p>&copy; 2023 test</p>
    </footer>
</body>
</html>

Thank you for your time.

I tried a lot of things thta i've seen on stack but it always opens the file instead of downloading it

4mg1n3
  • 1
  • 1
  • I searched for *stackoverflow client force download javascript*. Does that help? [How to create a file in memory for user to download, but not through server?](https://stackoverflow.com/questions/3665115/how-to-create-a-file-in-memory-for-user-to-download-but-not-through-server) - you would get the file contents via JavaScript and use the solution given in the link. – Peter Krebs Feb 28 '23 at 12:18
  • 1
    Your code example shows a relative URL. Is that the case for the real example or did you convert it from a cross origin URL for this example? – Quentin Feb 28 '23 at 12:20
  • 1
    Are you testing this on an HTTP server or does the link resolve to a `file:` scheme URL? – Quentin Feb 28 '23 at 12:20
  • 2
    "trying to implement a download link for a file (.txt)." does not match ` – Quentin Feb 28 '23 at 12:21
  • @PeterKrebs — Why involve JavaScript? This code should, under normal circumstances, work fine without it. – Quentin Feb 28 '23 at 12:22
  • Because if the browser knows how to handle the file extension it will show the file instead of downloading it. Server-side you could force a download as well but directly linking to a .txt file will just show its contents. I assumed this was the question. – Peter Krebs Feb 28 '23 at 12:23
  • @PeterKrebs — "Because if the browser knows how to handle the file extension it will show the file instead of downloading it" — No. [The `download` attribute](https://caniuse.com/?search=download) has been well supported for a decade. – Quentin Feb 28 '23 at 12:26
  • Ah I didn't catch that ok – Peter Krebs Feb 28 '23 at 12:27
  • It will be a zip on the same machine so it will be almost the same – 4mg1n3 Feb 28 '23 at 12:29
  • Oh yeah for the txt not matching the png it's just that i tried with different file types – 4mg1n3 Feb 28 '23 at 12:31
  • I'm testing on a file url – 4mg1n3 Feb 28 '23 at 12:32
  • According to the accepted answer to this question answer, it is not possible to force a download with JavaScript: https://stackoverflow.com/questions/5192917/force-download-through-js-or-query – Oriol Vilaseca Feb 28 '23 at 12:54

1 Answers1

0

You can download it using the download attribute, like this:

<a href="/path/to/file.txt" download>Example Download</a>

or, put it into a zip file.

Doxr
  • 1
  • 3
  • But that is precisely what is not working... If i put it in a zip it does download though. But it would be interesting to know how to do it for a .exe for example – 4mg1n3 Feb 28 '23 at 15:33
  • Well, if .zip file works, I don't mean to be rude, but that's kind of the whole point of answering your question. If it works, why look for other solutions? – Doxr Mar 01 '23 at 00:54