打印网页的特定部分

Question

我正在尝试打印我的应用程序的特定部分。

该应用程序有一个用户列表，显示他们的名字和姓氏。当我单击用户时，我会弹出一个包含有关他们的更详细信息的弹出窗口。

我将如何为我点击的用户打印弹出窗口？弹出窗口如下所示：

  <div id="user<?=$user->id;?>" class="popup">
      <div class="details">
           User details...
      </div>
      <a href="#print">Print</a>
 </div>

打印按钮还没有工作。

原文由 Gregor Menih 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用简单的 JavaScript 从页面打印特定的 div。

 var prtContent = document.getElementById("your div id");
var WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();

原文由 pmtamal 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果有很多 css 依赖项，上面的解决方案就会变得难以使用。如果你

• 不介意使用 3rd 方库 ( html2canvas )
• 不要介意所有 @media print css 规则都将被忽略（ _可以解决_）

您可以尝试对@pmtamal 的答案稍作修改。

• 将目标div中的html内容转换为canvas
• 打开一个新窗口并将画布附加到该窗口
• 打印

代码示例：

 let prtContent = document.querySelector(target);

html2canvas(prtContent).then(canvas => {
   let WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
   WinPrint.document.body.appendChild(canvas);
   WinPrint.document.close();
   WinPrint.focus();
   WinPrint.print();
   WinPrint.close();

});

原文由 Vivek Kodira 发布，翻译遵循 CC BY-SA 4.0 许可协议