Vue 2打印的组件与浏览器中的外观不同

Question

我目前在打印我的账单时遇到问题，使其看上去与浏览器中显示的完全一样。这是我在浏览器上的帐单：bill in browser

现在，如果我以所有样式打印该组件，它将看起来像这样：bill printed

我正在使用以下代码进行打印：https://stackoverflow.com/a/52345332/11717822

其原因是由于父元素及其样式。我需要打印父母，但不实际显示他们。

Answer 1

您在这里说的是，您希望能够将帐单嵌入到普通页面中，而该页面的样式不会影响帐单的样式。

为此，您只有三个选项：
 1.您可以为帐单创建一个单独的页面，然后使用iframe将该页面嵌入到常规页面中。
 2.您可以生成帐单的PDF并以类似方式嵌入PDF。
 3.您可以覆盖所有已应用的CSS规则，以确保帐单的CSS保持一致。

换句话说，您需要对票据进行正确的沙箱处理，以使不希望的CSS规则无法应用到票据，或者您需要对票据明确地应用所需的CSS规则，以包含所需的样式。