当内容位于编辑器之外时如何保留 TinyMCE 打印样式

Question

我正在尝试使用 HTML 到 PDF 转换器打印 React TinyMCE 编辑器的内容，但是当我提取内容并将其设置在自己的页面中时，样式非常不同。它保留了一些样式，但不是全部。

如果我在编辑器中按

ctrl + p

，它会很好用，并且会以文档的形式出现。但是，当我使用

puppeteer

将网页打印为 PDF 时，它会打印整个页面，包括包装内容（工具栏、菜单等），并且不会将漂亮的默认样式应用于内容。

我尝试使用如下内容提取并显示内容：

import { useRef, useState } from "react"
import { Editor } from "@tinymce/tinymce-react"
import classNames from "classnames"

const TextEditor = (props) => {

   const ref = useRef(null);
   const [editorContent, setEditorContent] = useState(null);
   return <>
   {editorContent &&
      <div className="mce-content-body" dangerouslySetInnerHTML={{"__html": editorContent.innerHTML}}></div>
   }
   <form className={classNames([{"d-none": editorContent !== null}])}>
      <Editor
          tinymceScriptSrc={process.env.PUBLIC_URL + "/tinymce/tinymce.min.js"}
          onInit={(evt, editor) => {
             ref.current = editor;
             setEditorContent(ref.current.getBody());
          }}
          initialValue={props.initialContent}
          init={{
             height: "100%",
             menubar: true,
             plugins: ["print"],
             toolbar: "print",
             content_style: `
                body {
                    font-family: Verdana,Helvetica,Arial,sans-serif;
                    font-size: 12pt;
                }
                @media screen {
                    body {
                       padding-left: 1.4in;
                       padding-right: 1.4in;
                    }
                }
                @media print {
                   body {
                      padding-left: 0.8in;
                      padding-right: 0.8in;
                      caret-color: transparent;
                   }
                   @page {
                      margin-top: 0.75in;
                      margin-bottom: 0.75in;
                   }
                }
             `,
             content_css: "document"
          }}
      />
   </form>
<>
}

我已经对这些类进行了一些尝试，以确保我添加了

skin.min.css

和

content.min.css

等，但我仍然无法欺骗浏览器相信它应该输出相同的结果就像用户在编辑器内容上按 Ctrl + P 一样。

我是否缺少一些隐藏的

@media print {}

或类似的东西来制作相同风格的打印输出？

Answer 1

事实证明我的问题是我无意中将 Bootstrap css 留在了 HTML head 样式元素中。 Bootstrap 的

@media print

与 TinyMCE 的印刷设计发生冲突。取出 Bootstrap css 后，我可以放入必要的类，以使打印输出与从 TinyMCE 的 iframed 编辑器内容打印时相同。