如何使用js自动下载PDF？

Question

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

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

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

Answer 1

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 文件。所以最后，浏览器会显示下载对话框到你机器上保存这个文件的位置。

Answer 2

使用download attribute。

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

Answer 3

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

window.open(pdfUrl, '_blank');

或：

window.open(pdfUrl);

Answer 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

中使用下载属性来标记

Answer 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/