Question

我在网页上有一些代码，它会生成一个表格，该表格应打印在只有该表格的页面上。

直到最近，这在Chrome中工作得很好，但现在只能在Microsoft Edge中运行（如果我们仓库中的所有计算机都在Windows 10上，那就没问题，但它们不是，也不可以） - 所以我需要迫切需要在Chrome中工作，或作为最后的手段，使用Internet Explorer。

以下是生成表格的代码：

<div id="printthis" style="display:none;width:95%;">
<div style="width:95%;border:2px groove black;display:none;">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="../css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="../css/theme.css">
<table>
<center>
<p><? echo $parseDay . " - " . $leads[$_GET["line"]] . "'s Line"; ?></p>
</center>
</table>
<table class="table table-bordered" style="font-size:12px;width:95%;">
<tr>
<thead>
<th width="125px">Name</th>
<th width="50px">Job</th>
<th>Notes</th>
<th align="right" width="50px">Emergency</th>
</thead>
</tr>
<?
while($row = mysqli_fetch_array($check))
    {

        $explodeAT = explode("|", $row['AT']);
        $explodeNotes = explode("|", $row['Notes']);

        if((((strcmp($parseDay1, 'Mon') == 0) && (strcmp($explodeAT['0'], 'Absent') == 0))
            || ((strcmp($parseDay1, 'Tue') == 0) && (strcmp($explodeAT['1'], 'Absent') == 0))
            || ((strcmp($parseDay1, 'Wed') == 0) && (strcmp($explodeAT['2'], 'Absent') == 0))
            || ((strcmp($parseDay1, 'Thu') == 0) && (strcmp($explodeAT['3'], 'Absent') == 0))
            || ((strcmp($parseDay1, 'Fri') == 0) && (strcmp($explodeAT['4'], 'Absent') == 0)))
            || (((strcmp($parseDay1, 'Mon') == 0) && (strcmp($explodeAT['0'], '') == 0))
            || ((strcmp($parseDay1, 'Tue') == 0) && (strcmp($explodeAT['1'], '') == 0))
            || ((strcmp($parseDay1, 'Wed') == 0) && (strcmp($explodeAT['2'], '') == 0))
            || ((strcmp($parseDay1, 'Thu') == 0) && (strcmp($explodeAT['3'], '') == 0))
            || ((strcmp($parseDay1, 'Fri') == 0) && (strcmp($explodeAT['4'], '') == 0)))) 
        {
        //if absent or unmarked, don't include. 
        } else {
        //if anything else, include.
        echo '<tr>';
        echo '<th width="125px">'.$row['Name'].'</th>';

        echo '<th>'.$row['Job'].'</th>';

        if((strcmp($parseDay1, 'Sat') == 0) || (strcmp($parseDay1, 'Sun') == 0)) {
            echo '<th>Today is not accounted for.</th>';
        } else {
            if(strcmp($parseDay1, 'Mon') == 0) {
                echo '<th>'.$explodeNotes['0'].'</th>';
            } else if(strcmp($parseDay1, 'Tue') == 0) {
                echo '<th>'.$explodeNotes['1'].'</th>';
            } else if(strcmp($parseDay1, 'Wed') == 0) {
                echo '<th>'.$explodeNotes['2'].'</th>';
            } else if(strcmp($parseDay1, 'Thu') == 0) {
                echo '<th>'.$explodeNotes['3'].'</th>';
            } else if(strcmp($parseDay1, 'Fri') == 0) {
                echo '<th>'.$explodeNotes['4'].'</th>';
            }
        }
        echo '<th><center><div style="width:15px;height:15px;border:1px solid black;border-radius:2px;"></div></center></th>';
        echo '</tr>';

        }
    }

?>
</table>
</div>
</div>

其工作方式完全正常，它可以为Microsoft Edge生成，如果我显示div，它们会在页面上生成。这个想法是它被隐藏在页面上，但当按下按钮时，它会在自己的窗口中打开div并打印出来。

这是javascript（这是我认为问题所在的地方，但我可能是错的，我用javascript不是那么好。）

<script type="text/javascript">
    function printthis()
    {
     var w = window.open('', '', 'width=800,height=600,resizeable,scrollbars');
     w.document.write($("#printthis").html());
     w.document.close(); // needed for chrome and safari
     javascript:w.print();
     w.close();
     return false;
    }
    </script>

我只是不明白为什么这在Microsoft Edge中运行良好，而不是在Chrome或IE中。

如果需要任何其他信息来帮助我解决这个问题，我会非常乐意提供它。

以下是一些图片：在边缘：

这正是我想要的。

现在，在Chrome中它有点奇怪。起初我得到了这个对话：

但如果我玩目的地，并改变文件保存的方式，我会得到这个对话：

Answer 1

它看起来像一个CSS错误。你有显示：none设置两次。

尝试更改前两行：

<div id="printthis" style="display:none;width:95%;">
<div style="border:2px groove black;">

...

如果仍然无效，您可以使用导入的Bootstrap CSS。

如果您愿意，可以完全删除javascript。（然后你可以使用浏览器的打印命令。不需要新窗口。）
将<link rel="stylesheet" href="../css/bootstrap.min.css">移至<head></head>。样式表通常应该进入<head>。
您可以将class =“visible-print”应用于要在打印时显示的项目。
您可以将class =“hidden-print”应用于要在打印时隐藏的项目。

这样的事情：

<div class="hidden-print">
  stuff you don't want to print
</div>

<div id="printthis" class="visible-print">
  <div style="width:95%;border:2px groove black; margin:0 auto;">

  ...your table stuff

Answer 2

我遇到的问题是从正在打印的隐藏div中导入到bootstrap。

基本上，我转过身来：

<div id="printthis" style="display:none;width:95%;">
<div style="width:95%;border:2px groove black;display:none;">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="../css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="../css/theme.css">

进入这个：

<div id="printthis" style="display:none;width:95%;">

如此清晰的代码，现在适用于所有浏览器。

在Chrome和IE上打印Javascript

2 个答案: