Question

我已经实现了一个允许用户打印页面一部分的打印功能。

这是代码：

print(): void {
    let printContents, popupWin;
    printContents = document.getElementById('print-section').innerHTML;
    popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
    popupWin.document.open();
    popupWin.document.write(`
      <html>
        <head>
          <title>Print tab</title>

  <meta charset="utf-8">
  <title>MegaMark - Reporting App</title>


  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" media='print,screen' type='text/css' href="./bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" media='print,screen' type='text/css' href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
  <link rel="stylesheet" media='print,screen' type='text/css' href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
  <link rel="stylesheet" media='print,screen' type='text/css' href="./plugins/jvectormap/jquery-jvectormap-1.2.2.css">
  <link rel="stylesheet" media='print,screen' type='text/css' href="./distAdminLte2/css/AdminLTE.min.css">
  <link rel="stylesheet" media='print,screen' type='text/css' href="./distAdminLte2/css/skins/_all-skins.min.css">
  <link rel="stylesheet" media='print,screen' type="text/css" href="./node_modules/primeng/resources/themes/omega/theme.css" />
  <link rel="stylesheet" media='print,screen' type="text/css" href="./node_modules/primeng/resources/primeng.min.css" />

    <link rel="stylesheet" href="./css/style.css">
        </head>
    <body onload="window.print();">${printContents}</body>
      </html>`
    );
    popupWin.document.close();
}

该功能正常运行，打开一个新窗口，内容正确呈现。

问题是当我使用“Microsoft print to PDF”作为打印机或“PDF Creator”将内容保存为PDF文件时，PDF并未正确应用所有css ...

我不知道这是一个角度问题还是css问题...

感谢支持

Javascript - 打印Html内容不能正确应用所有CSS

0 个答案: