☰

介绍

tag-icon • tag-icon firefox browser download
介绍

我正在寻找一种方法来强制下载您输入到浏览器中的 URL（最好是浏览器的地址栏，但不按 Enter 键，这样 URL 就不会先加载）。这应该适用于任何链接，而不仅仅是某些文件类型。基本上，它应该类似于右键单击链接并选择“另存为”选项。

我当前的“第一个”解决方法是使用以下 javascript 代码的书签：

javascript:document.body.innerHTML="<a download" + "sitelink".link(window.location.href).substring(1);

它会创建一个空白页面，其中只有一个链接指向我点击书签时所在的网站。然后我可以通过右键单击并选择“另存为”选项来使用它。适用于各种文件，例如 mp4 文件、文本文件、html 文件等。

然而，这并不总是有效，目前我遇到了以下问题：

  • 如果浏览器在创建链接之前必须“加载”一个大文件，而对于一些大文件来说，这需要时间。我目前有一个问题，PFD 文件无法被识别为 PDF，无法解析为文本进入浏览器窗口，并显示类似这样的内容，%PDF-1.5 %�50obj<>x��...我的解决方法有效，但如果文件有几 MB，它的性能就不是很好。（并且由于解析保存浏览器窗口的内容不再创建正确的 PDF 文件）

  • 使用本地存储的文件（例如 Firefox PDF 查看器中的 PDF 文件）。但 PDF 文件并没有那么糟糕，因为查看器给我一个下载按钮。

我当前的解决方案不适用于大文件（如上所述）。因此，我目前使用“第二种”解决方法：我创建一个仅包含链接的简单网站文件（我总是使用相同的 HTML 文件，只是交换链接），我在浏览器中打开包含链接的 html，然后右键单击它等。

我想知道是否有更优雅的方法来实现这一点？我想摆脱第二种解决方法的必要性（打开我的“手动” HTML 文件，更新链接，然后右键单击等）。虽然我对任何解决方法都感到高兴这节省了时间并且可以从浏览器内部访问（例如通过书签等），我更喜欢无需浏览器插件即可实现的解决方案。如果需要插件，我更喜欢开源的。

目前，我的主要浏览器是 Firefox，但也可以随意添加针对其他浏览器类型的附加解决方案。

答案1

介绍

我能够实现一键下载当前浏览器网址的书签。我能够在 Chrome 和 Firefox 中针对 html 文件和图像以及 PDF 文件进行测试。

代码首先会询问您使用浏览器prompt内置的命名文件（包括文件的扩展名）的名称，此时您也可以取消下载。

以下是您可以粘贴到的代码地点新创建书签的字段：

编辑：对于托管在 Intranet 上的文件，请使用此书签。现在也适用于互联网。

javascript:fetch(window.location.href).then(resp => resp.blob()) .then(blob => { const url = window.URL.createObjectURL(blob); const a = document.createElement('a'); a.style.display = 'none'; a.href = url; a.download = prompt("Enter filename and extension (e.g. myImage.jpg):", window.location.href.split('\/').pop() === "" ? window.location.hostname + ".html" : window.location.href.split('\/').pop()); document.body.appendChild(a); if(a.download !== "null") { a.click(); alert('Your file ' + a.download + ' has downloaded!'); } window.URL.revokeObjectURL(url); }) .catch(() => alert('Could not download file.'));

分解

以下是多行代码，我们可以将其分解

fetch(window.location.href)
  .then(resp => resp.blob())
  .then(blob => {
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    a.download = prompt("Enter filename and extension (e.g. myImage.jpg):", window.location.href.split('\/').pop() === "" ? window.location.hostname + ".html" : window.location.href.split('\/').pop());
    document.body.appendChild(a);
    if(a.download !== "null")
    {
        a.click();
        alert('Your file ' + a.download + ' has downloaded!');
    }
    window.URL.revokeObjectURL(url);
  })
  .catch(() => alert('Could not download file.'));

1）使用 Fetch 浏览器 API

fetch(window.location.href)

在这个书签中，我们使用浏览器的内置fetchAPI 来下载位于当前选项卡地址栏的 url 的文件内容。

2）使用 Blob

.then(resp => resp.blob())
  .then(blob => {
    const url = window.URL.createObjectURL(blob);

我们根据收到的响应构建一个Blob。这将允许我们下载文件。

3）创建锚标签

const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = prompt("Enter filename and extension (e.g. myImage.jpg):", window.location.href.split('\/').pop() === "" ? window.location.hostname + ".html" : window.location.href.split('\/').pop());

我们创建一个锚标记，在这里我们可以选择要求用户设置文件名。这样做很重要，这样我们才能获得正确的文件扩展名。注意：如果你想删除此提示，你可以设置 a.download 根据需要更改。例如： a.download = "downloaded_file";

但是，通过使用，prompt我们可以允许用户在下载之前取消操作。

4）下载文件并通过警报提供反馈

document.body.appendChild(a);
if(a.download !== "null")
{
    a.click();
    alert('Your file ' + a.download + ' has downloaded!');
}
window.URL.revokeObjectURL(url);
})
.catch(() => alert('Could not download file.'));

如果a.download是等于的字符串"null"（实际字符串而不是类型空），则表示用户在提示上按下了取消按钮，因此我们跳过自动单击锚标签。

此时，alert如果您不想让这些行弹出，可以将其删除。

相关内容