故障排除：如何打印指定elementById的窗口？（不中断生产）-解网

问：

我面临的问题：在本地开发中，此函数按预期工作。但是，在生产环境中，样式在新窗口（printWindow）的第一次呈现时中断。

我做了很多故障排除，似乎没有解决方案。应用程序在 nextjs 13.0.1 上运行。

总的来说，我想通过打印，因为页面上还有其他我不想要的 html 元素在打印视图中。id

function printElementsById(id: string) {
  const elementHead = document.head.innerHTML
  const elementToPrint = document.getElementById(id)

  if (elementToPrint) {
    let printWindow: Window = window.open("", "", "width=1280,height=720")!

    printWindow.document.write(
      `
        <html>
          <head>
            ${elementHead}
            <style>
              @media print {
                .no-print {
                  display: none !important;
                }
              }
            </style>
          </head>
          <body>
            <div class="no-print" style="display: flex; justify-content: center">
              <button style="margin: 1rem 2rem" onclick="{window.print()}">
                Print page
              </button>
            </div>
            ${elementToPrint.innerHTML}
          </body>
        </html>
      `
    )
  }
}

此函数的作用：打开一个新窗口，其中包含我们要打印的内容，并有一个“打印页面”按钮，该按钮将打开一个打印选项。

或者，我在这里尝试了该解决方案，当我在生产环境中运行时，该行为仍在发生。

JavaScript HTML 窗口文档 next.js13

故障排除：如何打印指定elementById的窗口？（不中断生产）

Troubleshooting: How can I print() window of a specified elementById? (Without production breaking)

评论