文件（pdf、jpg、png）下载而不是在新标签中打开答案

【问题标题】：File (PDF, JPG, PNG) download instead of opening in new tab文件（pdf、jpg、png）下载而不是在新标签中打开
【发布时间】：2021-04-24 17:12:51
【问题描述】：

我想下载文档而不是在新标签中打开它。扩展名为 .docx 的文件可以正常下载，但 .pdf 或 .jpg 只能在新选项卡中打开。我希望点击 .docx 后自动下载 pdf 和 jpg 文件。

Html（无法更改）：

<div *ngFor="let action of documentActions">
   <button (click)="action.makeAction(element)">
       <mat-icon>{{action.name}}</mat-icon>
    </button>
</div>

网址为 e.q：https://web-application.com/somefile.pdf

我已经厌倦了 FileSaver（npm intall file-saver），但仍然没有下载，只有打开新标签。

ts 组件：

declare var require: any
const FileSaver = require('file-saver');
(...)
        name: 'download',
        makeAction: (elem: DocumentListItem) =>
        {
          const url = elem.documentUrl;
          const filename = elem.name;
          FileSaver.saveAs(url,filename);
        }

我也累了：

 makeAction: (elem: DocumentListItem) =>
        {
          window.open( elem.documentUrl);
        }

or

   makeAction: (elem: DocumentListItem) =>
        {
          window.location.href =  elem.documentUrl;
        }

但效果相同。在任何情况下都可以下载 docx 文件。我将不胜感激帮助解决问题。

您好！

【问题讨论】：

显示你的服务器代码...
不是很清楚你使用的是什么库，但假设Node.js/Express，有javascript - node/express Force browser to download file with custom name - Stack Overflow
您的确切意思是什么服务器代码？这就是我完成这项任务的所有代码
您的程序在哪台机器上运行？（客户端浏览器中的 JavaScript 代码，而不是服务器上的 Node.js？或者客户端机器上的这个 Node.js 是否正在运行一些东西来抓取预定义的网站？）为什么你可以更改 JavaScript 而不能更改 HTML？跨度>
这是 Angular CLI 服务器

标签： javascript angular typescript downloadfile

【解决方案1】：

如果您可以在渲染阶段构建文档 URL，您可以使用带有download 属性的简单 HTML 链接，例如：

<a href="[URL]" download="[optional suggested file name]">...</a>

参见MDN A element download attribute docs。

【讨论】：

无法更改现有的 html 片段。我需要处理 ts 文件中的下载
啊，抱歉，在您的问题中忽略了这一点。然后假设你可以在你的点击处理程序中构造、附加到正文并人工点击链接相同的元素，但恐怕会有龙。
我已经厌倦了你的解决方案，它产生了同样的效果。文件正在新标签中打开，但未下载
hm，这并不奇怪，这是一个容易出错的雷区。我做了一个快速测试和 POC，至少最综合的场景对我有用（见其他答案）。但是一旦您破坏了相同的来源或列入白名单的协议规则，或者某些 iframe 发挥作用或浏览器认为它不安全，它就必须破坏。
无论如何，stackoverflow.com/questions/65807836/… 中提出的解决方案（如果您设法调整服务器以发送Content-Disposition: attachment 标头）感觉是最好的解决方案。

【解决方案2】：

要从按钮单击处理程序触发下载，应该可以模拟具有下载属性单击的普通链接元素。该链接的href 属性必须与文档或blob: 或data: uri 同源。

POC 在顶级页面中工作（在当前的 Chrome 和 Firefox 中测试），在 SO 沙盒 iframe 中不工作：

function dl(url, filename){
 var a = document.createElement('a');
 a.setAttribute('href',url);
 a.setAttribute('download', filename||'');
 document.body.appendChild(a);
 a.onclick = function(){setTimeout(function(){document.body.removeChild(a)},100)}
 a.click();
}

<p>(Not working in SO sandbox iframe.)

<p><button onclick="
    dl('data:text/plain,test', 'button-download-test.txt')
    ">download text datauri</button>

<p><button onclick="
     dl(document.location.href, 'button-download-test.html')
     ">download this HTML file</button>

<p><button onclick="
    dl('./probe.png', 'button-download-test.png')
    ">download png file of same origin</button>

【讨论】：