將隱藏圖像打印到PDF的不同頁面中

我有一個網頁，其中95％是由用戶選擇和從數據庫中提取的內容動態生成的。將隱藏圖像打印到PDF的不同頁面中

作爲網站的一部分，用戶使用畫布（有點像powerpoint），並將完成的畫布保存爲圖像。然後將圖像存儲在HTML中的具有display:none的div中。

我想要的是能夠點擊一個按鈕或只是按打印，並有這些圖像是唯一的選擇打印。更好的做法是在不同的頁面上打印每個單獨的圖像。

我嘗試過使用@media print與display:none/block和visibility:hidden/visible的各種組合，但這似乎不起作用，頁面上總是有殘留內容。

事實上，我甚至不能看到整個頁面的打印預覽無添加：

@media print{ 
*{ 
    display:block; 
    } 
}

我是否有CSS打印問題B C動態創建的頁面的內容/？還是有另一個問題，我應該問？

在此先感謝您的幫助！

來源

2013-07-16 alutz33

再次重申我的問題：我有HTML中被隱藏在沒有顯示的DIV的圖像。我只想將這些圖像打印到PDF。

對於這裏感興趣的是我的解決方案。我的HTML看起來像這樣：

<div id="head"> 
     <div id="img_group" style="display:none"> 
      <img href="img 1" /> 
      <img href="img 2" /> 
     </div> 
    </div> 
    <div id="contents"></div>

我嘗試了CSS的解決方案，並沒有完全工作：@Radoslaw中號

* { 
    display: none; 
    }

不起作用，因爲這將覆蓋後面的任何display: block;。所以我的解決辦法本來是結合display:none和visibility:hidden以下CSS合作，只顯示id="img_group DIV：

body{ 
     visibility:hidden; 
    } 
    #contents{ 
     display:none; 
    } 
    #img_group{ 
     visibility:visible; 
    }

但是這種解決方案的問題是，visibility:hidden留下空白，其中div標籤應該是。

這是我的解決方案。我用一些JavaScript，打印按鈕，jsPDF（http://jspdf.com/）：

<div id="head"> 
     <button id="print">Print</button> 
     <div id="img_group" style="display:none"> 
      <img href="data:img 1" /> 
      <img href="data:img 2" /> 
     </div> 
    </div> 
    <div id="contents"></div> 

    <script> 
     var doc = new jsPDF('landscape','pt', 'computer'); 
     var i = 0; 
     $('#img_group').find('img').each(function(){ 
      if(i != 0){ 
       doc.addPage(); 
      } 
      var imgData = $(this).attr('href'); 
      doc.addImage(imgData, 'JPEG', 0, 0, 1067, 600); 
      i++; 
     }); 
     doc.save('test.pdf'); 
    </script>

這解決了我打印這些隱藏的圖像到PDF的問題，甚至讓我每幅圖像打印到不同的頁面的PDF。我希望這個解決方案可以幫助任何未來有這個問題的人！

來源

2013-07-21 07:01:58 alutz33

我希望我能理解你的問題。

簡單地說：將一個類添加到您想要打印的所有內容，並隱藏其他所有內容。

@media print { 
    * { 
    display: none; 
    } 

    .printable { 
    display: block; 
    }

來源

2013-07-17 07:29:26

將隱藏圖像打印到PDF的不同頁面中

回答

相關問題