请求后如何将页面保存为 pdf？答案

【问题标题】：How can i save the page as pdf as soon as it has been requested?请求后如何将页面保存为 pdf？
【发布时间】：2019-12-17 05:01:02
【问题描述】：

我想在收到请求后立即以 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】：

你需要定义一个变量 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="background-color: white;">
         <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>

【讨论】：

它给出了更多错误 jspdf.min.js:65 Uncaught TypeError: Cannot read property 'childNodes' of undefined at g (jspdf.min.js:65) at Object.f.fromHTML (jspdf .min.js:75) 在 HTMLButtonElement. (?id=8:448) 在 HTMLButtonElement.dispatch (jquery-1.12.3.min.js:3) 在 HTMLButtonElement.r.handle (jquery-1.12.3 .min.js:3)
能否请您再次复制代码，因为
正在下载一个空白页面。我该如何解决？
能否请您更改您的问题并在您的问题中添加 html，因为此处 pdf 生成正确...
是的，好的。它正在工作，但 css 没有渲染。如何用css下载pdf？