0

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

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

我想要的是能够单击一个按钮或只需按打印，并让这些图像成为唯一选择打印的东西。更好的是在不同的页面上打印每个单独的图像。

我曾尝试将 @media print 与display:none/blockand进行各种组合visibility:hidden/visible，但这似乎不起作用，页面上总是有残留内容。

事实上，如果不添加，我什至看不到整个页面的打印预览：

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

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

提前感谢您的帮助！

4

1 回答 1

0

重申我的问题：我在 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_groupdiv：

    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-21T07:01:58.067 回答