注意:并非所有浏览器都支持。

我正在寻找一种方法，使用jquery下载文件，而不必从一开始就在href属性中设置文件url。

jQuery (< / >, { id:“downloadFile”, href:“http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png”, 风格:“显示:隐藏。” 下载:“ }) .appendTo(身体的); $ (" # downloadFile ") [0] .click (); < script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本>

使用iframe的简单示例

function downloadURL(url) {
    var hiddenIFrameID = 'hiddenDownloader',
        iframe = document.getElementById(hiddenIFrameID);
    if (iframe === null) {
        iframe = document.createElement('iframe');
        iframe.id = hiddenIFrameID;
        iframe.style.display = 'none';
        document.body.appendChild(iframe);
    }
    iframe.src = url;
};

然后在任何你想要的地方调用这个函数:

downloadURL(“path / to /我的文件”);

您可以简单地使用HTML中的Download属性。使用优秀的Javascript，你可以使用这个功能直接下载文件。锚标记的download属性应该指向要下载的文件所在的链接。

首先，将URL指向资源路径:

var url = 'your url goes here';

创建一个锚标记，需要的属性如下所示:

var elem = document.createElement('a');
elem.href = url;
elem.download = url;
elem.id="downloadAnchor";

将锚标记附加到网页的body元素。

document.body.appendChild(elem);

现在以编程方式触发单击事件。点击锚标记将触发下载。

$('#downloadAnchor').click();

把它们放在一起:

var url = 'your url goes here';
var elem = document.createElement('a');
elem.href = url;
elem.download = url;
elem.id="downloadAnchor";
document.body.appendChild(elem);
$('#downloadAnchor').click();

附加信息:上面的代码没有什么奇特的，只是从Chrome Devtools的控制台工作的客户端JavaScript，但功能强大，也开辟了许多可能性，如网页爬行。

例如，下面这段在Devtools控制台中执行的代码将在一个新的选项卡中打开页面中的所有链接:只要进入这个网页，打开Devtools并在浏览器控制台中运行这个脚本，就可以看到JavaScript的强大威力了。(注意:下面的代码仅用于教学目的。)

确保你为该网站启用了弹出窗口，否则你的锚点点击将被默认的弹出窗口拦截器禁用。

var links = document.getElementsByClassName("_3ATBKe");
for(var i=0;i<links.length;i++){
    var title = document.getElementsByClassName("_3ATBKe")[i].firstElementChild.firstElementChild.innerText.replaceAll('|','-').replaceAll(':','x');
    console.log('Opening..'+title);
    links[i].firstElementChild.click();
}

注意:这不仅仅局限于点击锚，你可以下载几乎任何你在你的网页上找到的东西。如果某些东西(图像、音频、视频)加载到你的网页上，你可以编写一个脚本来下载它，即使UI没有提供给你。

使用一个不可见的<iframe>:

<iframe id="my_iframe" style="display:none;"></iframe>
<script>
function Download(url) {
    document.getElementById('my_iframe').src = url;
};
</script>

为了迫使浏览器下载它本来能够呈现的文件(例如HTML或文本文件)，您需要服务器将文件的MIME Type设置为一个无意义的值，例如application/x-please-download-me或application/octet-stream，这用于任意二进制数据。

如果您只想在一个新选项卡中打开它，唯一的方法是让用户单击目标属性设置为_blank的链接。

jQuery:

$('a#someID').attr({target: '_blank', 
                    href  : 'http://localhost/directory/file.pdf'});

无论何时单击该链接，它都会在一个新的选项卡/窗口中下载文件。

使用锚标签和PHP它可以做到，检查这个答案

JQuery Ajax调用PDF文件下载

HTML
    <a href="www.example.com/download_file.php?file_source=example.pdf">Download pdf here</a>

PHP
<?php
$fullPath = $_GET['fileSource'];
if($fullPath) {
    $fsize = filesize($fullPath);
    $path_parts = pathinfo($fullPath);
    $ext = strtolower($path_parts["extension"]);
    switch ($ext) {
        case "pdf":
        header("Content-Disposition: attachment; filename=\"".$path_parts["basename"]."\""); // use 'attachment' to force a download
        header("Content-type: application/pdf"); // add here more headers for diff. extensions
        break;
        default;
        header("Content-type: application/octet-stream");
        header("Content-Disposition: filename=\"".$path_parts["basename"]."\"");
    }
    if($fsize) {//checking if file size exist
      header("Content-length: $fsize");
    }
    readfile($fullPath);
    exit;
}
?>

我正在检查文件大小，因为如果你从CDN cloudfront加载pdf，你不会得到文档的大小，这迫使文档下载为0kb，为了避免这种情况，我正在检查这种情况

 if($fsize) {//checking if file size exist
      header("Content-length: $fsize");
    }

你必须从服务器和客户端(web应用程序)两方面进行操作。

在服务器上，设置名为Content-Disposition https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition的报头

// nodejs express
  res.set('Content-Disposition', `attachment; filename="${self.creationName}"`)

使用上面的头文件，服务器会告诉浏览器响应是一个文件，它应该下载并以给定的名称保存，否则浏览器可能会将文件保存为“attachments (1).zip”之类的文件

接下来，我们查看客户端，创建一个锚链接并自动单击它。

function downloadThroughAnchorLink(downloadUrl: string, fileName: string) {
    const a = document.createElement('a')
    a.href = downloadUrl;
    // We provided a header called Content-Disposition so we dont need to set "a.download" here
    // a.download = fileName || 'download'
    a.click()
}

这样就行了。