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

Question

我试图为我的个人投资组合网站创建一个按钮，允许用户从点击按钮下载我的简历。我不确定我的HTML5文件出错了。现在，当按钮被点击时，它只会打开新页面上的简历。

<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>

如果需要进一步的代码上下文，请告诉我。到目前为止，前面的页面是什么样子的。按钮本身在那里，点击打开一个新的网页与简历，而不是下载它。](https://i.stack.imgur.com/cLmS5.jpg)

我试着使用上面的代码，希望它能直接从网页下载简历。相反，它打开了一个新的一页与简历。这仅仅是因为我还没有把网页放在一个主机域，还是这是一个编码问题？

Answer 1

你可以试试这个：

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

• href是一条解析为同一来源的URL的路径。这意味着页面和文件必须共享相同的域、子域、协议(HTTP和HTTPS)和端口(如果指定的话)。例外是blob:和data：(总是起作用)和file：(从来不起作用)。
• proposed_file_name是要保存到的文件名。如果是空的，浏览器默认为文件的名称。

Answer 2

您可以使用：

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

您需要使路径正确，以便在相关目录中有一个名为mycv.txt的文件。这里的关键是在锚元素中使用download属性。

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