如何实现跨不同浏览器打开<dialog>的页面打印一致？

Question

问题

浏览器打印 dialog 内容的方式不同。

Chrome 仅打印部分对话框内容 (v121.0)。
Firefox 不打印对话框内容 (v123.0)。
Safari 打印对话框的所有内容（v17.2.1）。

复制

在全页模式下运行以下代码片段，单击“显示模态”按钮，然后按

CMD & P

或

CTRL & P

开始打印。

const dialogElem = document.getElementById("dialog");
const showBtn = document.getElementById("show");
const closeBtn = document.getElementById("close");

showBtn.addEventListener("click", () => {
  dialogElem.showModal();
});

closeBtn.addEventListener("click", () => {
  dialogElem.close();
});

body,
button {
  font-size: 60px;
}

article {
  color: darkblue;
}

dialog {
  color: darkgreen;
}

<button id="show">Show Modal</button>

<article>
  <p><b>before 1</b> - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum hic possimus deleniti modi similique, nisi officia dolores nostrum ipsa iure obcaecati at aliquam aut voluptates, magni autem laudantium commodi voluptate.</p>
  <p><b>before 2</b> - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum hic possimus deleniti modi similique, nisi officia dolores nostrum ipsa iure obcaecati at aliquam aut voluptates, magni autem laudantium commodi voluptate.</p>
  <p><b>before 3</b> - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum hic possimus deleniti modi similique, nisi officia dolores nostrum ipsa iure obcaecati at aliquam aut voluptates, magni autem laudantium commodi voluptate.</p>
</article>

<dialog id="dialog">
  <p><b>inside 1</b> - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum hic possimus deleniti modi similique, nisi officia dolores nostrum ipsa iure obcaecati at aliquam aut voluptates, magni autem laudantium commodi voluptate.</p>
  <p><b>inside 2</b> - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum hic possimus deleniti modi similique, nisi officia dolores nostrum ipsa iure obcaecati at aliquam aut voluptates, magni autem laudantium commodi voluptate.</p>
  <p><b>inside 3</b> - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum hic possimus deleniti modi similique, nisi officia dolores nostrum ipsa iure obcaecati at aliquam aut voluptates, magni autem laudantium commodi voluptate.</p>
  <button id="close">close</button>
</dialog>

<article>
  <p><b>after 1</b> - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum hic possimus deleniti modi similique, nisi officia dolores nostrum ipsa iure obcaecati at aliquam aut voluptates, magni autem laudantium commodi voluptate.</p>
  <p><b>after 2</b> - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum hic possimus deleniti modi similique, nisi officia dolores nostrum ipsa iure obcaecati at aliquam aut voluptates, magni autem laudantium commodi voluptate.</p>
  <p><b>after 3</b> - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum hic possimus deleniti modi similique, nisi officia dolores nostrum ipsa iure obcaecati at aliquam aut voluptates, magni autem laudantium commodi voluptate.</p>
</article>

期待

印刷版应该：

完整显示对话框内容。
仅显示对话框内容。

在打印介质上，顶层的所有元素应相邻放置，而不是堆叠（同样

display: block; position: static; overlay: none;

）。

注意事项

MDN描述了一个打开的对话框被放置在顶层。这些样式不受自定义 CSS 的影响。

设置为显示：无；隐藏和显示时：阻止；显示时，以及从顶层和可访问性树中删除/添加到顶层和可访问性树中。

引自 MDN 关于 Dialog 的内容

顶层是一个特定的图层，跨越视口的整个宽度和高度，位于 Web 文档中显示的所有其他图层之上。

引自 MDN 关于顶层的内容

需要注意的是，叠加层只能由浏览器设置——作者样式无法更改任何元素的叠加层值。

引自 MDN 关于 Overlay 的内容

我尝试调整 Chrome 中的样式。它们有一些效果，但内容仍然不完全可见。

dialog:-internal-dialog-in-top-layer {
  max-height: unset !important;
  position: static !important;
  height: min-content !important;
  overlay: none !important;
}

Answer 1

由于不同的浏览器以不同的方式处理打印对话框，实现一致性的唯一方法似乎是确保我们不会尝试打印对话框。

有点老套，因此您将需要对话框的第二个副本，该副本通常不会显示，但位于 div 内，并且是打印时唯一显示的内容。

[注意：SO 片段在这种情况下不能很好地工作，因此这里是在本地运行的代码]。

<style>
body,
button {
  font-size: 60px;
}

article {
  color: darkblue;
}

dialog, #dialogtoprint {
  color: darkgreen;
}
#dialogtoprint {
  display: none;
}
@media print {
  body.dialogshowing > *:not(#dialogtoprint) {
    display: none;
  }
 body.dialogshowing #dialogtoprint {
   display: block;
   }
 }
</style>

<body>
<button id="show">Show Modal</button>

<article>
  <p><b>before 1</b> - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum hic possimus deleniti modi similique, nisi officia dolores nostrum ipsa iure obcaecati at aliquam aut voluptates, magni autem laudantium commodi voluptate.</p>
  <p><b>before 2</b> - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum hic possimus deleniti modi similique, nisi officia dolores nostrum ipsa iure obcaecati at aliquam aut voluptates, magni autem laudantium commodi voluptate.</p>
  <p><b>before 3</b> - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum hic possimus deleniti modi similique, nisi officia dolores nostrum ipsa iure obcaecati at aliquam aut voluptates, magni autem laudantium commodi voluptate.</p>
</article>

<dialog id="dialog">
  <p><b>inside 1</b> - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum hic possimus deleniti modi similique, nisi officia dolores nostrum ipsa iure obcaecati at aliquam aut voluptates, magni autem laudantium commodi voluptate.</p>
  <p><b>inside 2</b> - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum hic possimus deleniti modi similique, nisi officia dolores nostrum ipsa iure obcaecati at aliquam aut voluptates, magni autem laudantium commodi voluptate.</p>
  <p><b>inside 3</b> - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum hic possimus deleniti modi similique, nisi officia dolores nostrum ipsa iure obcaecati at aliquam aut voluptates, magni autem laudantium commodi voluptate.</p>
  <button id="close">close</button>
</dialog>

<div id="dialogtoprint">
  <p><b>inside 1</b> - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum hic possimus deleniti modi similique, nisi officia dolores nostrum ipsa iure obcaecati at aliquam aut voluptates, magni autem laudantium commodi voluptate.</p>
  <p><b>inside 2</b> - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum hic possimus deleniti modi similique, nisi officia dolores nostrum ipsa iure obcaecati at aliquam aut voluptates, magni autem laudantium commodi voluptate.</p>
  <p><b>inside 3</b> - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum hic possimus deleniti modi similique, nisi officia dolores nostrum ipsa iure obcaecati at aliquam aut voluptates, magni autem laudantium commodi voluptate.</p>
</div>

<article>
  <p><b>after 1</b> - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum hic possimus deleniti modi similique, nisi officia dolores nostrum ipsa iure obcaecati at aliquam aut voluptates, magni autem laudantium commodi voluptate.</p>
  <p><b>after 2</b> - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum hic possimus deleniti modi similique, nisi officia dolores nostrum ipsa iure obcaecati at aliquam aut voluptates, magni autem laudantium commodi voluptate.</p>
  <p><b>after 3</b> - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum hic possimus deleniti modi similique, nisi officia dolores nostrum ipsa iure obcaecati at aliquam aut voluptates, magni autem laudantium commodi voluptate.</p>
</article>
</body>
<script>
const dialogElem = document.getElementById("dialog");
const showBtn = document.getElementById("show");
const closeBtn = document.getElementById("close");

showBtn.addEventListener("click", () => {
  document.body.classList.add('dialogshowing');
  dialogElem.showModal();
});

closeBtn.addEventListener("click", () => {
  document.body.classList.remove("dialogshowing");
  dialogElem.close();
});
</script>

如何实现跨不同浏览器打开<dialog>的页面打印一致？

问题描述投票：0回答：1

1个回答

最新问题

如何实现跨不同浏览器打开<dialog>的页面打印一致？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1