将隐藏图像打印到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的不同页面中

回答

相关问题