如何将样式化的DIV保存为PDF

嗨有没有办法使用Javascript或HTML将样式化的DIV保存为PDF格式？如何将样式化的DIV保存为PDF

我有一个样式的DIV，我希望能够通过点击一个按钮将它保存为PDF我还想保留它的样式。

这怎么办？

感谢

<style> 
    .spOutputbox { 
     margin: 5px 0 0 40px; 
     padding: 10px; 
     width: 378px; 
     height: 568px; 
     border-radius: 5px; 
     font-size: 15px; 
     color: #333; 
     box-shadow: 0 1px 5px rgba(0,0,0,0.25); 
     background: #f5f5f5; 
     text-align: center; 
     float: left; 
    } 
    .outline { 
     border: 1px dotted #000; 
    } 
    .spOutputbox .ribbon { 
     margin-top: 20px; 
     width: 100%; 
     height: 40px; 
     border-top: 1px dotted #000; 
     border-bottom: 1px dotted #000; 
    } 
    .spOutputbox .tableTitle { 
     margin: 30px 0; 
     font-size: 30px; 
     font-weight: normal; 
    } 
    .spOutputbox .pname { 
     margin: 10px 0; 
     font-size: 18px; 
     font-weight: normal; 
    } 
    </style> 

    <div class="spOutputbox"> 
     <div class="outline"> 
      <div class="ribbon"></div> 
      <div class="spContent"> 
      <div class="tableTitle">Table 1</div> 
      <div class="pname">Name 1</div> 
      <div class="pname">Name 2</div> 
      <div class="pname">Name 3</div> 
      <div class="pname">Name 4</div> 
     </div> 
    </div> 
    <button id="makepd">generate PDF</button>

来源

2015-09-24 David

可能的重复[在HTML页面中下载div作为使用javascript的pdf]（http://stackoverflow.com/questions/17293135/download-a-div-in-a -html-page-as-pdf-using-javascript） – jenjis

嗨，我已经看过jsPDF，但它看起来并不像它只能将样式穿过。我希望有一种方法来捕捉CSS样式。因此，这个问题。 – David

也许Html2Canvas可以帮助你：

与这个库，你应该能够在div转换成画布，，然后使用类似示例代码：

var imgData = canvas.toDataURL('image/jpeg'); 
var doc = new jsPDF('landscape'); 

doc.addImage(imgData, 'JPEG', 15, 40, 180, 180); 
doc.save('sample-file.pdf');

将div保存为pdf上的图像

欲了解更多信息，请参阅this jsPDF post

来源

2015-09-24 16:00:30 jenjis

嗨，感谢您的信息看起来像组合Htnl2Canvas与jsPDF应该实现我想要做的事情。虽然我很难让jsPDF工作。 – David

好吧，让它与HTML2Canvas一起工作，但打印的输出是模糊的。无论如何Html2canvas创建一个HQ图像？ – David

好吧，现在就得到这个完整的排序。我正在使用xepOnline.jqPlugin.js这非常简单易用。 – David

如何将样式化的DIV保存为PDF

回答

相关问题