强制通过 HTML 下载文件答案

【问题标题】：Forcing a file download through HTML强制通过 HTML 下载文件
【发布时间】：2020-12-13 18:40:21
【问题描述】：

我试图通过提供文件名来触发下载，但不是下载而是在选项卡中打开。以下是我正在使用的代码。我也在使用 Chrome 浏览器。

<!DOCTYPE html> 
<html> 
   <body> 
      <p> 
         <a href="someFile.png" download="ID"> 
         <button type="button">Download</button> 
         </a> 
   </body> 
</html>

【问题讨论】：

button 嵌套到 a 是无效的 HTML 开头。

标签： javascript html css anchor href

【解决方案1】：

这应该可以工作

<a href="someFile.png" download>
    <button type="button">Download</button>
</a>

我觉得你的浏览器有问题，换个浏览器试试。

另外，我建议您转到 Chrome 的设置并向下滚动到高级设置。在下载部分，单击clear您的自动打开选项。并且，打开Ask where to save each file before downloading。

【讨论】：

即使这样也行不通。我也尝试过使用 edge，但它让我可以选择打开和取消，而不是保存。
@Deepesh Sharma 我建议你去 Chrome 的设置并向下滚动到高级设置。在下载部分，单击clear 您的自动打开选项。并且，打开Ask where to save each file before downloading。

【解决方案2】：

Chrome 已弃用跨域下载，请参阅chrome-65-deprecations，您需要将图像放在同源上，然后才能正常工作。

这是有效的 javascript 示例，但您的图像应该是同一来源。

const btn = document.querySelector('#download_button');

btn.onclick = function() {
  const link = document.createElement("a");
      link.setAttribute("href", "https://homepages.cae.wisc.edu/~ece533/images/airplane.png");
      link.setAttribute("download", "airplane.png");
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
}

<!DOCTYPE html> 
<html> 
   <body> 
      <p> 
         <button id="download_button" type="button">Download</button>
      </p>
   </body> 
</html>

【讨论】：

【解决方案3】：

您可以先创建一个锚元素，然后再下载您的文件。按照代码sn-p。

var a = document.createElement('a');
a.href = 'file_path';  // file path for the blob object.
a.download = 'file_name.png';  // set file name
a.click();

【讨论】：

用这个在新标签页中打开