如何将div导出为PDF?

时间:2018-08-09 16:08:23

标签: javascript html

我正在尝试将div导出为PDF格式。

当我单击该按钮时,将打开一个页面以将页面保存为PDF或打印。

此页面应显示div的内容,但显示的是[object HTMLDivElement]:

Image with Problem

HTML:

<div id="PDF" class="tab-pane fade in active"> 
    <div class="table-responsive panel">
       <table class="table">
          <tbody>
              <tr>
                  <td class="text-success"><i class="fa fa-user"></i> Name</td>
                  <td>@Model.Name</td>
              </tr>
              <tr>
                  <td class="text-success"><i class="fa fa-home"></i> Adress</td>
                  <td>@Model.Adress</td>
              </tr>
           </tbody>
        </table>
    </div>
</div>
<button type="button" class="btn btn-primary btn-circle btn-xl" id="btnPrint" data-toggle="tooltip" title="Export"> </button>

JavaScript:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $("#btnPrint").live("click", function () {
        var divContents = $("#PDF").html();
        var printWindow = window.open('', '', 'height=400,width=800');
        printWindow.document.write('<html><head><title>PDF</title>');
        printWindow.document.write('</head><body >');
        printWindow.document.write(PDF);
        printWindow.document.write('</body></html>');
        printWindow.document.close();
        printWindow.print();
    });
</script>

该如何解决?

2 个答案:

答案 0 :(得分:1)

通过替换以下行来更新代码

var printWindow = window.open('', '_self', 'height=400,width=800');
printWindow.document.write(divContents);

答案 1 :(得分:0)

var divContents = $("#PDF").html();

...

printWindow.document.write(PDF);

我相信您正在保存要打印的内容,但没有使用它:

printWindow.document.write(divContents);