如何使用js自动下载PDF？

Posted 2023-02-24

【中文标题】如何使用js自动下载PDF？

【英文标题】：How to download PDF automatically using js?

【发布时间】：2016-04-13 23:46:25

【问题描述】：

我的场景是 PDF 文件自动下载，然后用户填写它，当点击 PDF 中的提交按钮时，它连接到 java servlet 并将其保存在数据库中。

用户点击按钮 javascript 代码自动运行和 PDF 文件下载 使用 JavaScript 自动打开文件 用户填写并按提交 提交 servlet 代码后运行并将数据保存到数据库中

在我的应用程序中，仅缺少第二点。请提供代码如何使用 JavaScript 与扩展交互以自动下载文件。 我只想下载文件。

【问题讨论】：

document.location = 'url of pdf'

请更具体。您是否只需要@JaromandaX 在上面显示的方法或更具体的方法。

【参考方案1】：

对于第二点，将 pdf 文件的完整路径获取到某个 java 变量中。例如http://www.domain.com/files/filename.pdf

例如您正在使用 php 并且 $filepath 包含 pdf 文件路径。

这样你就可以编写 javascript 来模拟下载对话框。

<script language="javascript">
    window.location.href = '<?php echo $filepath; ?>';
</script

以上代码通过其 URL“http://www.domain.com/files/filename.pdf”将浏览器发送到 pdf 文件。所以最后，浏览器会显示下载对话框到你机器上保存这个文件的位置。

【讨论】：

我试过这个:<script type="text/javascript"> window.location.href = 'file:///C:/Users/EHSAAN/Desktop/chrome%20extension/practice/abc.pdf'; </script> 但它会打开文件而不是下载它

window.location.href 告诉文件的url不是下载文件

对不起，我的意思是在下面说：应该是pdf文件的完全限定url，如下所示：

我给出了完整的路径。我不明白你在说什么？请详细说明

嗯，完整路径意味着如果您在浏览器地址栏中输入直接指向pdf的url，您就可以访问它。正确的？因此完整的 url 必须存在于 PHP 的 $filepath 变量中。

【参考方案2】：

使用download attribute。

var link = document.createElement('a');
link.href = url;
link.download = 'file.pdf';
link.dispatchEvent(new MouseEvent('click'));

【讨论】：

这很好用。非常感谢。我们可以指定下载文件的路径吗？ chrome 不询问路径并使用 javascript 或 html 以编程方式获取路径

@EhsaanIsrar 我们不能。浏览器通常使用下载文件的用户设置。

非常感谢。你能告诉我如何在 xhtml 中自动下载吗？我正在开发一个基于 java 的框架 liferay portlet，其中的视图是使用 xhtml 和 primefaces 设计的？有没有办法在这个中自动下载

@EhsaanIsrar 您可以将答案标记为已接受，不是吗？我不确定“自动在 xhtml 中”是什么意思。问题是关于应该可以正常工作的javascript。您可以在正文等末尾添加脚本标签

在 2020 年 6 月无法在最新的 chrome 和 Ubuntu 18.04 上运行，如果有的话，你能告诉我需要改变什么吗？由于下载的文件显示失败，没有文件错误并且无法打开文件，而不是 createElement('a')，我怎样才能给出任何 div 的元素 ID？

【参考方案3】：

也可以在新窗口打开pdf链接，剩下的交给浏览器处理：

window.open(pdfUrl, '_blank');

或：

window.open(pdfUrl);

【讨论】：

这个是新窗口打开pdf文件，有什么办法可以直接下载吗？

这也有效，尽管新窗口会立即打开和关闭，导致用户体验不佳

【参考方案4】：

请试试这个

(function ($) 
    $(document).ready(function()
       function validateEmail(email) 
            const re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]1,3\.[0-9]1,3\.[0-9]1,3\.[0-9]1,3\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]2,))$/;
            return re.test(email);
           
       
       if($('.submitclass').length)
            $('.submitclass').click(function()
                $email_id = $('.custom-email-field').val();
                if (validateEmail($email_id)) 
                  var url= $(this).attr('pdf_url');
                  var link = document.createElement('a');
                  link.href = url;
                  link.download = url.split("/").pop();
                  link.dispatchEvent(new MouseEvent('click'));
                
            );
       
    );
(jQuery));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post">
        <div class="form-item form-type-textfield form-item-email-id form-group">
            <input placeholder="please enter email address" class="custom-email-field form-control" type="text" id="edit-email-id" name="email_id" value="" size="60" maxlength="128" required />
        </div>
        <button type="submit" class="submitclass btn btn-danger" pdf_url="https://file-examples-com.github.io/uploads/2017/10/file-sample_150kB.pdf">Submit</button>
</form>

或者在HTML5

中使用

下载属性

来标记

【参考方案5】：

/* Helper function */
function download_file(fileURL, fileName) 
// for non-IE
if (!window.ActiveXObject) 
    var save = document.createElement('a');
    save.href = fileURL;
    save.target = '_blank';
    var filename = fileURL.substring(fileURL.lastIndexOf('/')+1);
    save.download = fileName || filename;
       if ( navigator.userAgent.toLowerCase().match(/(ipad|iphone|safari)/) && navigator.userAgent.search("Chrome") < 0) 
            document.location = save.href; 
// window event not working here
        else
            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();

如何使用？

download_file(fileURL, fileName); //call function

来源：convertplug.com/plus/docs/download-pdf-file-forcefully-instead-opening-browser-using-js/