如何將樣式化的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

回答

相關問題