HTML5, CSS, JS 如何在个人网站上创建一个允许下载简历的按钮

Question

I am trying to create a button for my personal portfolio website that allows users to download my CV from clicking on a button. I am not sure went wrong in my HTML5 file. Right now, when the button is clicked on, it simply opens up the CV on a new page.

<div class="d-block d-sm-flex align-items-center"><a class="btn content-download button-main button-scheme" href="resume/BenZhaoResumeSWE.pdf" download="" role="button">Download CV</a>

Let me know if further context around the code is needed. Here is what the frontend looks like the on webpage so far. The button itself is there and clicking on opens up a new webpage with the CV instead of downloading it. ]( https://i.stack.imgur.com/cLmS5.jpg )

I tried using the above line of code and expected it to download the CV straight from the webpage. Instead it opens up a new page with the CV. Is this simply because I have not yet put the webpage on a host domain or is this a coding issue?

Answer 1

You can try this one:

<a class="btn content-download button-main button-scheme" href="resume/BenZhaoResumeSWE.pdf" download="proposed_file_name" >Download CV</a>

• href is a path that resolves to an URL on the same origin. That means the page and the file must share the same domain, subdomain, protocol (HTTP vs. HTTPS), and port (if specified). Exceptions are blob: and data: (which always works), and file: (which never works).
• proposed_file_name is the filename to save to. If it is blank, the browser defaults to the file's name.

Answer 2

You can use:

<p>Download <a href="/path/to/mycv.txt" download>my cv</a> please.</p>

You will need to get the path correct so that there is a file called mycv.txt in the relevant directory. The key point here is the use of the download attribute in the anchor element.

See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a and https://itnext.io/how-to-download-files-with-javascript-d5a69b749896