如何在请求页面后立即将其另存为pdf?

问题描述 投票:0回答:1

我希望在收到请求后立即以pdf格式下载该页面。这是我的脚本:

        <script>
            pdfdoc.fromHTML($('#container').html(), 10, 10, {
                'width': 110,
                'elementHandlers': specialElementHandlers
            });
            pdfdoc.save('Invoice.pdf');
        </script>

但是控制台出现错误未捕获的ReferenceError:未定义pdfdoc在?id = 5:435我已经在标题中链接了脚本该如何解决?

javascript jquery jspdf
1个回答
0
投票

您需要定义一个变量pdfdoc var doc = new jsPDF();并且您还需要添加jspdf.min.js文件。

请尝试以下代码:

<div id="content">
    <h3>Sample h3 tag</h3>
    <p>Sample pararaph</p>
</div>
<div id="editor"></div>
<button id="cmd">Generate PDF</button>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"></script>

<script>
var doc = new jsPDF();
var specialElementHandlers = {
    '#editor': function (element, renderer) {
        return true;
    }
};

$('#cmd').click(function () {   
    doc.fromHTML($('#content').html(), 15, 15, {
        'width': 170,
            'elementHandlers': specialElementHandlers
    });
    doc.save('sample-file.pdf');
});
</script>

能否请您尝试以下代码

<!DOCTYPE html>
<html>
   <head>
      <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.min.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
   </head>
   <body>
      <div id="content">
         <style>
            p{
            font-size:27px;
            }
         </style>
         <h3>Sample h3 tag</h3>
         <p style="color:red;">Sample pararaph</p>
      </div>
      <div id="editor"></div>
      <button id="cmd">Generate PDF</button>
      <script>
         window.onload=function(){
         $('#cmd').click(()=>{
         var pdf = new jsPDF();
         pdf.addHTML(document.getElementById("content"),function() {
          pdf.save('web.pdf');
         });
         })

         }
      </script>
   </body>
</html>
© www.soinside.com 2019 - 2024. All rights reserved.