如何使用JS将html中的div内容下载到pdf文件中？答案

【问题标题】：How to put and download the content of a div in html into pdf file using JS?如何使用JS将html中的div内容下载到pdf文件中？
【发布时间】：2014-12-08 16:51:38
【问题描述】：

我需要将 div 的内容放入 pdf 文件中然后下载。我搜索了一下，发现您可以通过jsPDF 使用 javascript 来执行此操作。

我找到了这个示例代码，但它似乎对我不起作用。当我单击生成 pdf 按钮时，没有任何反应。我也在为我的框架使用 codeigniter，我的网站目前上传到 000.webhost.com。

     <div id="content">
      <h3>Hello, this is a H3 tag</h3>

          <p>a pararaph</p>
     </div>
      <div id="editor"></div>
       <button id="cmd">generate PDF</button>

         <script type="text/javascript">
       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>

【问题讨论】：

标签： html codeigniter jspdf

【解决方案1】：

在 JSFiddle.net 上为我工作： http://jsfiddle.net/scottcanoni/h3Lb05wa/

您的网站出现什么错误？

我只包括 jQuery 和 jsPDF 脚本：

<script type="text/javascript" src="https://parall.ax/parallax/js/jspdf.js"></script>

如果您在 <head> 标记中同时包含 jQuery 和 jsPDF，那么您应该可以使用提供的代码。

【讨论】：

没有错误。当我在我的网站上单击生成 pdf 时，什么也没有发生。你需要下载 /parallax/js/jspdf.js 吗？我有点困惑应该将 jspdf js 文件放在我的文档中的哪个位置。我决定把它和我的观点放在一起。可以吗？
我更新了我的答案。您需要在页面上的 <head></head> 标记之间包含 jsPDF。确保它在那里。或者，您可以下载 JS 并从您自己的域中提供它。
是的。我已经包括了它。 js文件是否应该与视图位于同一文件夹中？（使用 codeigniter 作为框架）
我设法让它工作，但我有一个新问题。我似乎无法处理具有表格的 div 的内容。
它在 pdf 文件中的输出是这样的 Copyright Pechay Productions 2014 ID Type Name Owner Contact # Address Accreditation Status 1 Apartment Nicoles Apartment 它应该水平对齐。

【解决方案2】：

您使用 JavaScript 是有原因的吗？我会（并且已经）使用 DOM PDF；

https://github.com/dompdf/dompdf

https://github.com/bcit-ci/CodeIgniter/wiki/PDF-generation-using-dompdf

【讨论】：

你能用 dom pdf 创建一个简单的代码吗？我无法理解。我尝试使用 js，因为它易于理解并且在 html 文件中。