如何使用js自动下载PDF

How to download PDF automatically using js?

本文关键字：下载 PDF 何使用 js      更新时间：2023-09-26

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

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

在我的申请中，只遗漏了第二点。请提供如何使用JavaScript与扩展交互以自动下载文件的代码。我只想下载这个文件。

使用下载属性。

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

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

window.open(pdfUrl, '_blank');

或：

window.open(pdfUrl);

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

请尝试此

(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

中进行标记
  1. 对于第二点，在一些java变量中获取pdf文件的完整路径。例如。http://www.domain.com/files/filename.pdf

例如，您使用的是php，$filepath包含pdf文件路径。

这样您就可以编写类似于的javascript来模拟下载对话框。

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

以上代码通过其url将浏览器发送到pdf文件"http://www.domain.com/files/filename.pdf".所以最后，浏览器会显示下载对话框，将此文件保存在您的机器上。

相关文章：