Javascript 将隐藏图像打印到PDF的不同页面

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

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

display:none

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

我曾尝试将@media print与

显示：无/块

和

可见性：隐藏/可见

组合使用，但这似乎不起作用，页面上总是有剩余内容

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

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

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

---

提前感谢您的帮助

我希望我能理解你的问题

简单地说：将类添加到要打印的所有内容中，并隐藏其他所有内容

@media print {
  * {
    display: none;
  }

  .printable {
    display: block;
  }

---

重复我的问题：我有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>

不起作用，因为这会覆盖任何

显示：块如下所示。因此，我的解决方案最初是结合
display:none
和
visibility:hidden
以下css只显示
id=“img\u group
div:

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

然而，这个解决方案的问题是
可见性：hidden
在div标记应该存在的地方留下了空白

这是我的解决方案。我使用了一些javascript、一个打印按钮和jsPDF（）：


印刷品
var doc=新的jsPDF（'scape'，'pt'，'computer'）；
var i=0；
$（'img_group'）。查找（'img'）。每个（函数（）{
如果（i！=0）{
doc.addPage（）；
}
var imgData=$（this.attr（'href'）；
addImage文件（imgData，'JPEG'，0,01067600）；
i++；
});
doc.save（'test.pdf'）；

这解决了我将这些隐藏图像打印到PDF的问题，甚至允许我将每个图像打印到PDF中的不同页面。我希望此解决方案能够帮助将来有此问题的任何人

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

    <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>