0

I have tried following details :

  1. <form method="get" action="file.doc">
  <button type="submit">Download!</button>
</form>

  2. <a href="path_to_file" download="proposed_file_name">Download</a>

  3. <a class="btn btn-success" href="https://www.google.com" target="_blank">Google</a>

  4. <button type="submit" onclick="window.open('file.doc')">Download!</button>

Can anyone suggest some good answer

Ivar
  • 6,138
  • 12
  • 49
  • 61
Raj
  • 11
  • Does this answer your question? [(HTML) Download a PDF file instead of opening them in browser when clicked](https://stackoverflow.com/questions/6794255/html-download-a-pdf-file-instead-of-opening-them-in-browser-when-clicked) – Ivar Mar 09 '21 at 12:19
  • [`download`](https://developer.mozilla.org/nl/docs/Web/HTML/Element/a#attributes) should work fine as long as the domain is the same (of both the file and the web-page that contains the button). Otherwise add a [`Content-Disposition`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition) header – Ivar Mar 09 '21 at 12:22
  • _“I have tried following details”_ - and? With what outcome in each case? And what exactly did you not _like_ about that outcome? Please go read [ask]. – CBroe Mar 09 '21 at 13:00

1 Answers1

0

<!DOCTYPE html>
<html lang="">
<title>Dummy Test</title>

<body>
  <input type="button" id="btn" value="Download" />
  <script>
    function download(file) {
      var element = document.createElement('a');
      var fileContent = 'Insert Content';
      var myFile = new Blob([fileContent], {
        type: 'text/plain'
      });
      window.URL = window.URL || window.webkitURL;
      element.setAttribute('href', window.URL.createObjectURL(myFile));
      element.setAttribute('download', file);
      document.body.appendChild(element);
      element.click();
      document.body.removeChild(element);
    }

    document.getElementById("btn").addEventListener("click", function() {
      var filename = "test.txt";
      download(filename);
    }, false);
  </script>
</body>

</html>

The above code will give a downloadable .txt file without redirecting to another page. The code will not give the result here as the file is created locally.

GMAC
  • 788
  • 4
  • 23
  • I am not the person who voted down, but I guess a button tag in an a tag is not semantic or correct syntactically. – Miu Mar 09 '21 at 13:43
  • I believe there is no issue with `button` tag. I re-ran the code, working fine as expected. – GMAC Mar 09 '21 at 13:49
  • I know no errors occur :) But it’s not correct syntactically. It’s odd, which causes some problems on SEO and screen readers etc – Miu Mar 09 '21 at 13:57
  • I've changed the button tag. but I wasn’t expecting -1 for this. – GMAC Mar 09 '21 at 14:03
  • Thank you for taking in my advice :) I don’t want to say this, but it’s still wrong. Unfortunately an input tag in an a tag is the same as button in a. HTML is a markup language. Doing markup gives a “meaning/role” to elements. “a” tag has a role as link. input/button has a role as a button. If an element has both of the roles, computers get confused. Which role is this element for? – Miu Mar 09 '21 at 14:21
  • 1
    You can try validation of your code here: https://validator.w3.org/nu/#textarea You’ll see an error about the input tag. – Miu Mar 09 '21 at 14:27
  • 1
    Thanks for the advice, I have now edited the code and validated it from the validator and now its error-free. For further discussion [continue this discussion in chat](https://chat.stackoverflow.com/rooms/229690/discussion-between-gaurav-gupta-and-miu). – GMAC Mar 09 '21 at 15:13
  • Really thanks for the suggestion - @GauravGupta . But my files are hosted in AWS S3 bucket , now what I will do ? – Raj Mar 10 '21 at 05:14