时间戳

首页 > 解决方案 > 如何将样式/样式表应用于我用来在反应中打印特定 div 的隐藏 iframe

html - 如何将样式/样式表应用于我用来在反应中打印特定 div 的隐藏 iframe

问题描述

我在打印我的文章时遇到这个问题标题不像我的网站那样粗体，我正在使用以下功能打印特定的 div

      function closePrint(this: any) {
    document.body.removeChild(this.__container__)
  }

  const handlePrint = () => {
    let content = document.getElementById(`${notice ? "notice" : "article"}:${id}`)
    let oHideFrame = document.createElement("iframe")

    oHideFrame.style.position = "fixed"
    oHideFrame.style.display = "block"
    oHideFrame.style.visibility= "hidden"
    oHideFrame.style.right = "0"
    oHideFrame.style.bottom = "0"
    oHideFrame.style.width = "0"
    oHideFrame.style.height = "0"
    oHideFrame.style.border = "0"
    document.body.appendChild(oHideFrame)
    // oHideFrame.onload = setPrint
    let pri = oHideFrame.contentWindow
    if (pri) {
      pri.document.open()
      if (content) {
        pri.document.write(content.innerHTML)
        pri.document.close()
        pri.onbeforeunload = closePrint
        pri.onafterprint = closePrint
        pri.focus()
        pri.print() 

      }
    }
  }

我的文件夹结构如下所示

├───api
├───components
│   ├───singleArticle
├───style
│   ├───components
│   └───pages
└───utils

如何将样式或样式表应用到我的 iframe，以便我打印的 div 看起来与它在我的网站中的显示方式完全相同。如果这不可能，请提供替代解决方案。谢谢你

编辑 1：我听说对打印包做出反应是一个很好的解决方案，有没有人有使用它的经验，所以当我打印它时，它也会加载我的 CSS https://github.com/gregnb/react-to-print

标签： htmlcssreactjsiframeprinting

解决方案

推荐阅读