Question

我有一个95％的网页是由用户选择和从数据库中提取的内容动态生成的。

作为网站的一部分，用户使用画布（有点像powerpoint）并将完成的画布保存到图像中。然后将图像存储在具有display:none的div中的HTML中。

我想要的是能够点击按钮或只是按下打印并将这些图像作为唯一选择要打印的内容。更好的方法是在不同的页面上打印每个单独的图像。

我尝试在display:none/block和visibility:hidden/visible的各种组合中使用@media print，但这似乎不起作用，页面上总是有残留内容。

事实上，如果不添加以下内容，我甚至无法看到整个页面的打印预览：

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

我是否有CSS打印问题b / c页面内容是动态创建的？或者我还有另一个问题要问？

提前感谢您的帮助！

Answer 1

我希望我理解你的问题。

简单地说：为要打印的所有内容添加一个类，并隐藏其他所有内容。

@media print {
  * {
    display: none;
  }

  .printable {
    display: block;
  }

Answer 2

要重新解决我的问题：我的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 M

    * {
    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中的不同页面。我希望这个解决方案可以帮助将来遇到这个问题的其他人！

打印隐藏的图像，每个图像到PDF的不同页面

2 个答案: