Question

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

1 - User click on Button
2 - JavaScript code run and PDF file download automatically
3 - open file using JavaScript automatically
4 - user fills & press submit
5 - after submit servlet code run and save data in db

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

Answer 1

使用download attribute。

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

Answer 2

还可以在新窗口中打开pdf链接，然后让浏览器处理其余内容：

window.open(pdfUrl, '_blank');

或：

window.open(pdfUrl);

Answer 3

请尝试

(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 4

第二点，获取pdf文件到一些java变量的完整路径。例如http://www.domain.com/files/filename.pdf

e.g。你正在使用php和$ filepath包含pdf文件路径。

所以你可以写javascript来模拟下载对话框。

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

上面的代码通过网址“http://www.domain.com/files/filename.pdf”将浏览器发送到pdf文件。最后，浏览器将显示下载对话框，以便将此文件保存在您的计算机上。

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/

如何使用js自动下载PDF？

5 个答案: