jsPDF不能得到任何樣式工作

我是新來使用jsPDF，但對於我的生活，我不能得到任何CSS應用於這件事情！我試過內聯，內部和外部都無濟於事！我在另一篇SO文章中讀到，因爲它技術上是將文件打印到文件中，所以我需要打印樣式表，而且這也不起作用。jsPDF不能得到任何樣式工作

我有我只是試圖讓任何CSS一起工作一個非常基本的網頁： JS：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript" src="jspdf.js"></script> 
<script type="text/javascript" src="./libs/FileSaver.js/FileSaver.js"></script> 
<script type="text/javascript" src="./libs/Blob.js/BlobBuilder.js"></script> 
<script type="text/javascript" src="jspdf.plugin.standard_fonts_metrics.js"></script> 
<script type="text/javascript" src="jspdf.plugin.split_text_to_size.js"></script>    
<script type="text/javascript" src="jspdf.plugin.from_html.js"></script> 
<script> 
    $(document).ready(function(){ 
     $('#dl').click(function(){ 
     var specialElementHandlers = { 
      '#editor': function(element, renderer){ 
       return true; 
      } 
     }; 
     var doc = new jsPDF('landscape'); 
     doc.fromHTML($('body').get(0), 15, 15, {'width': 170, 'elementHandlers': specialElementHandlers}); 
     doc.output('save'); 
     }); 
    }); 
</script>

HTML：

<body> 
    <div id="dl">Download Maybe?</div> 
    <div id="testcase"> 
     <h1> 
      We support special element handlers. Register them with jQuery-style 
     </h1> 
    </div> 
</body>

最後的樣式表是外部：

h1{ 
    color: red; 
} 
div{ 
    color: red; 
}

我敢肯定，所有包含正確，並有n o錯誤，已經檢查了所有這些。有沒有像我需要調用一些額外的功能來讓CSS工作呢？請讓我知道！非常感謝！任何其他提示，你可能也感激！

編輯：這是確切的網頁：

<html> 
    <head> 
     <link rel="stylesheet" href="print.css" type="text/css" media="print"/> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
     <script type="text/javascript" src="jspdf.js"></script> 
     <script type="text/javascript" src="./libs/FileSaver.js/FileSaver.js"></script> 
     <script type="text/javascript" src="./libs/Blob.js/BlobBuilder.js"></script> 
     <script type="text/javascript" src="jspdf.plugin.standard_fonts_metrics.js"></script> 
     <script type="text/javascript" src="jspdf.plugin.split_text_to_size.js"></script>    
     <script type="text/javascript" src="jspdf.plugin.from_html.js"></script> 
     <script> 
      $(document).ready(function(){ 
       $('#dl').click(function(){ 
       var specialElementHandlers = { 
        '#editor': function(element, renderer){ 
         return true; 
        } 
       }; 
       var doc = new jsPDF('landscape'); 
       doc.fromHTML($('body').get(0), 15, 15, {'width': 170, 'elementHandlers': specialElementHandlers}); 
       doc.output('save'); 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <div id="dl">Download Maybe?</div> 
     <div id="testcase"> 
      <h1> 
       We support special element handlers. Register them with jQuery-style 
      </h1> 
     </div> 
    </body> 
</html>

來源

2013-12-08 samuraiseoul

您是否在控制檯中發現錯誤？ IE瀏覽器。 - 您的資源是否正確加載？。我之所以問這個問題，是因爲在我的開發人員環境中：「//ajax.googleapis.com」給我帶來了麻煩：「http://ajax.googleapis.com」沒有。到那一點：你能告訴我更多關於你的開發堆棧 - 即。這些頁面如何呈現WAMP，MAMP，RoRails，Node？不知道這是否太重要，但誰知道 - 我想看到這個問題得到解答。 – sdailey

一切正在加載，這只是一個簡單的.html文件， – samuraiseoul

我認爲我們需要你所有的代碼，或者你可以上傳它的地方？因爲當我使用你提供的代碼樣式的代碼很好。 – Jarno

~~我認爲這個問題是您使用 media="print"，而不是 media="screen"。嘗試使兩個不同的文件，一個用於打印，一個用於屏幕：~~

~~<link rel="stylesheet" href="print.css" type="text/css" media="print"/> <link rel="stylesheet" href="screen.css" type="text/css" media="screen"/>~~

~~屏幕一個將包含頁面的樣式爲在瀏覽器中看到的。打印文件將包含打印頁面時的樣式，或者在這種情況下將其保存爲PDF。~~

編輯

我檢查了jsPDF website但我認爲他們不支持CSS。你可以做這樣的事情，雖然創建具有不同顏色的文本文檔：

doc.setFontSize(22); 
doc.setTextColor(255, 0, 0); 
doc.text(20, 20, 'This is a title'); 

doc.setFontSize(16); 
doc.setTextColor(0, 255, 0); 
doc.text(20, 30, 'This is some normal sized text underneath.');

在你的腳本將這個代碼有權根據var doc = new jsPDF('landscape');。

來源

2013-12-11 11:46:45 Jarno

我只是試過這個，雖然它正常的風格頁面，我仍然無法得到它的風格PDF時，我將它保存爲PDF。 :( – samuraiseoul

我認爲他們不支持CSS，請檢查我的更新回答。 – Jarno

那麼，JSPDF對我來說是無用的，如果我不能應用CSS，你知道任何庫讓我拍攝一部分DOM？Image或PDF？如果我可以通過Id捕獲dom的子元素，格式不是非常重要！ – samuraiseoul

您可以使用jsPDF捕獲屏幕截圖，但您也需要html2canvas。使用html2canvas將html轉換爲畫布並獲取圖像內容。創建jsPDF一個空的PDF並添加HTML圖像內容爲PDF格式並保存：

html2canvas(*html*, { 
    onrendered: function(canvas) { 
    const contentDataURL = canvas.toDataURL('image/png') 
    let pdf = new jsPDF() 
    pdf.addImage(contentDataURL, 'JPEG', 20, 20) 
    pdf.save('form.pdf') 
    } 
})

這將保留所有的CSS，但質量會受到一點（模糊）。

來源

2016-10-31 18:00:30 flashmatrix

你可以嘗試this選項，使用jsPDF，html2canvas和HTML2PDF庫

來自其自述：

包括此文件：

<script src="jspdf.min.js"></script> 
<script src="html2canvas.min.js"></script> 
<script src="html2pdf.js"></script>

，然後你可以通過運行生成的PDF ：

html2pdf($('body').get(0), { 
    margin:  1, 
    filename:  'myfile.pdf', 
    image:  { type: 'jpeg', quality: 0.98 }, 
    html2canvas: { dpi: 192, letterRendering: true }, 
    jsPDF:  { unit: 'in', format: 'letter', orientation: 'portrait' } 
});

來源

2017-10-03 12:05:12 drizzt13

jsPDF不能得到任何樣式工作

回答

相關問題