Question

我有一个页面，标题中有2个css：

<link type="text/css" rel="stylesheet" href=<?= $theme_url ?>/css/page-kitchen.css">
<link type="text/css" rel="stylesheet" href=<?= $theme_url ?>/css/page-kitchen.css" media="print">

和2个脚本文件：

<script type="text/javascript" src="<?= $theme_url ?>/js/jquery.min.js"></script>
<script type="text/javascript" src="<?= $theme_url ?>/js/kitchen.js"></script>

我有一个打印<img>标签，用于调用onclick打印事件：

<img src="<?= $site_url ?>/wp-content/uploads/printer.png" alt="Print page" onclick="printDiv('#body-print');" style="cursor: pointer; width: 5%; height: 5%;"></img>

打印页面#body-div内容。

它会打开打印机页面，但不会添加默认的css文件。这是我的js文件：

function printDiv(divName) {
    var printContents = document.getElementById(divName).innerHTML;
    var originalContents = document.body.innerHTML;

    document.body.innerHTML = printContents;

    window.print();

    document.body.innerHTML = originalContents;
}

我试图附加css文件，但不能做得太远。检查了网站上的this和this解决方案，但这些解决方案都不适用于我。

Answer 1

我认为问题出在css结构中，它使用子类（.divclass.subdivclass）来应用样式

当你将div内容移动到body时，它会获取其内容并将其移动到正文以消除父div。

在Javascript中将css附加到可打印的innerHTML div

1 个答案: