使用 javascript/ajax/jquery 强制下载 pdf 链接

IT技术 javascript
2021-01-24 19:44:28

假设我们有一个 pdf 链接“ http://manuals.info.apple.com/en/iphone_user_guide.pdf ”(只是为了让你知道该文件不在我的服务器上,我只有链接)。 .现在我必须在我的网站上提供一个按钮来下载文件。

我尝试了各种方法,例如 window.open、href 等方法,但它会在其他窗口上打开链接。我知道那是因为现在所有浏览器都带有一个 adobe 插件,它可以在另一个窗口中打开它,但仍然没有任何方式让用户可以选择下载而不是打开它,通过客户端脚本..

请帮忙..谢谢

6个回答

这是一个Javascript解决方案(适用于像我这样正在寻找标题答案的人):

function SaveToDisk(fileURL, fileName) {
    // for non-IE
    if (!window.ActiveXObject) {
        var save = document.createElement('a');
        save.href = fileURL;
        save.target = '_blank';
        save.download = fileName || 'unknown';

        var evt = new MouseEvent('click', {
            'view': window,
            'bubbles': true,
            'cancelable': false
        });
        save.dispatchEvent(evt);

        (window.URL || window.webkitURL).revokeObjectURL(save.href);
    }

    // for IE < 11
    else if ( !! window.ActiveXObject && document.execCommand)     {
        var _window = window.open(fileURL, '_blank');
        _window.document.close();
        _window.document.execCommand('SaveAs', true, fileName || fileURL)
        _window.close();
    }
}

来源:http : //muaz-khan.blogspot.fr/2012/10/save-files-on-disk-using-javascript-or.html

不幸的是,这不适用于 IE11,它不接受新的 MouseEvent。在这种情况下,我使用以下内容:

//...
try {
    var evt = new MouseEvent(...);
} catch (e) {
    window.open(fileURL, fileName);
}
//...
错误失败没有文件 <button class="btn btn-xs" onclick="SaveToDisk(" cloudagent-im.s3.amazonaws.com/042015/… class="fa fa-download fa-3"></i> </按钮>
2021-03-21 19:44:28
@Dino 这段代码绝对应该被 wiki 编辑、增强和集体更新,并定期更新以说明技术更新。但我不知道如何在 SO 上实现这个 utopic 目标 :)
2021-03-27 19:44:28
谢谢你的方法。它将文件保存为“未知”我将其更改为 fileURL 它将其保存为“http---localhost-ielts/gtreading-workbook-Activity_3_1.pdf”知道如何修复它吗?
2021-04-09 19:44:28

使用 HTML5“下载”属性

<a href="iphone_user_guide.pdf" download="iPhone User's Guide.PDF">click me</a>

2021 年更新:现在所有主要浏览器都支持!请参阅:caniuse.com/#search=download

如果您需要支持旧浏览器,或者您正在寻找实际的javascript 解决方案(出于某种原因),请参阅lajarre 的答案

根据 caniuse caniuse.com/#search=download这目前在 safari 中不受支持。我只是在猜测,但您可以使用 jquery.ajaxcontentType来实现这一点。否则,如果您可以控制服务器,当然可以告诉它使用二进制 mime 类型发送文件。
2021-03-19 19:44:28
这对 HTML4 有何帮助?还有另一种方法吗?
2021-03-24 19:44:28
OP 对我来说无关紧要(恕我直言)。此页面作为第一个结果之一出现在 Google 中,但并未回答我的查询,这与标题完全相同。如果你不明白,请参考我的回答。
2021-03-24 19:44:28
嗨,我使用了相同的代码,但该代码在 safari 中不起作用,您能否向我推荐任何允许在 javascript 中强制下载 pdf 文件的好插件。
2021-03-31 19:44:28
这并没有回答确切的问题
2021-04-11 19:44:28

使用 JavaScript 是非常困难的,如果不是不可能的话(?)。我建议使用某种代码隐藏语言,例如 PHP、C# 或 Java。如果您要使用 PHP,您可以在按钮发布到的页面中执行以下操作:

<?php
header('Content-type: application/pdf');
header('Content-disposition: attachment; filename=filename.pdf');
readfile("http://manuals.info.apple.com/en/iphone_user_guide.pdf");
?>

这似乎也适用于 JS(来自http://www.phpbuilder.com/board/showthread.php?t=10149735):

<body>
<script>
function downloadme(x){
myTempWindow = window.open(x,'','left=10000,screenX=10000');
myTempWindow.document.execCommand('SaveAs','null','download.pdf');
myTempWindow.close();
}
</script>

<a href=javascript:downloadme('http://manuals.info.apple.com/en/iphone_user_guide.pdf');>Download this pdf</a>
</body>

是使用 javaScript 下载文件的完美示例。

用法: download_file(fileURL, fileName);

如果 htaccess 是一个选项,这将使所有 PDF 链接下载而不是在浏览器中打开

<FilesMatch "\.(?i:pdf)$">
  ForceType application/octet-stream
  Header set Content-Disposition attachment
</FilesMatch>