0

我还有一个问题：
我有一个表格，里面有图表和表格，它在浏览器中显示得很好。但是，当我尝试在 mozila 中打印它（我需要将其打印为 pdf）时，第 3 速表正在被剪切，因此它仅显示 2.5 速表。
 选项“缩小以适应”没有帮助，如果比例为 100%，我有问题，如果我放 70% 或更少——我可以看到所有 3 个速度计，但其他文本太小。其他表格和内容根据比例完美呈现。有没有办法解决这个问题？这是关于 FireFox 浏览器的——我完全需要他，但我也在 Chrome 中尝试过——他只是使用自动缩放，但它仍然可以提供大约 70% 的空间。
那么有没有办法在打印时缩放图表？设置图表的精确像素大小对我的问题来说是个坏主意。
这是speedometrs图表表的链接 我认为问题是JS在绘制页面时只运行一次，之后它就没有缩放。
该css文件：

.container
{
    width:33%;
    border:0px solid black;
}
.speedometr
{
    width:80%;
    margin-left: auto;
    margin-right: auto;
}

以及 html 文件（您可以在链接中找到 js ）：

<table class="speedometr" >
    <tr>
        <td id="container" style= "width: 33%; height: 33%"></td>
        <td id="container1" style= "width: 33%; height: 33%"></td>
        <td id="container2" style= "width: 33%; height: 33%"></td>
    </tr>
<tr></tr>
<td class="container">
<table class="speedometr_tables">
    <tr>
        <td align=center bgcolor="DDDFFF">
            <B>1</B>
        </td>
        <td align=center bgcolor="DDDFFF">
            From(h:mm)
        </td>
        <td align=center bgcolor="DDDFFF">
            Up to(h:mm)
        </td>

    </tr>
    <tr>
        <td align=center bgcolor="55BF3B">
            <B>Ideal</B>
        </td>
        <td align=center>
            0:00
        </td>
        <td align=center>
            01:00
        </td>

    </tr>
    <tr>
        <td align=center bgcolor="DDDF0D">
            <B>Optimal</B>
        </td>
        <td align=center>
            01:00
        </td>
        <td align=center>
            02:00
        </td>

    </tr>
    <tr>
        <td align=center bgcolor="DF5353">
            <B>Critical</B>
        </td>
        <td align=center>
            02:00
        </td>
        <td align=center>
            03:00
        </td>

    </tr>
    </table>
    </td>
    <td class="container">
<table class="speedometr_tables">
    <tr>
        <td align=center bgcolor="DDDFFF">
            <B>2</B>
        </td>
        <td align=center bgcolor="DDDFFF">
            From(h:mm)
        </td>
        <td align=center bgcolor="DDDFFF">
            Up to(h:mm)
        </td>

    </tr>
    <tr>
        <td align=center bgcolor="55BF3B">
            <B>Ideal</B>
        </td>
        <td align=center>
            0:00
        </td>
        <td align=center>
            100:00
        </td>

    </tr>
    <tr>
        <td align=center bgcolor="DDDF0D">
            <B>Optimal</B>
        </td>
        <td align=center>
            100:00
        </td>
        <td align=center>
            200:00
        </td>

    </tr>
    <tr>
        <td align=center bgcolor="DF5353">
            <B>Critical</B>
        </td>
        <td align=center>
            200:00
        </td>
        <td align=center>
            300:00
        </td>

    </tr>
    </table>
    </td>

    <td class="container">
<table class="speedometr_tables">
    <tr>
        <td align=center bgcolor="DDDFFF">
            <B>3</B>
        </td>
        <td align=center bgcolor="DDDFFF">
            From(h:mm)
        </td>
        <td align=center bgcolor="DDDFFF">
            Up to(h:mm)
        </td>

    </tr>
    <tr>
        <td align=center bgcolor="55BF3B">
            <B>Ideal</B>
        </td>
        <td align=center>
            0:00
        </td>
        <td align=center>
            100:00
        </td>

    </tr>
    <tr>
        <td align=center bgcolor="DDDF0D">
            <B>Optimal</B>
        </td>
        <td align=center>
            100:00
        </td>
        <td align=center>
            200:00
        </td>

    </tr>
    <tr>
        <td align=center bgcolor="DF5353">
            <B>Critical</B>
        </td>
        <td align=center>
            200:00
        </td>
        <td align=center>
            300:00
        </td>

    </tr>
    </table>
    </td>
</table>
4

2 回答 2

0

如果您的工作被中断，请在代码之间的设定点处添加空 div，以确保将某些内容保留到每个打印页面。

将此 css 添加到空白 div 中：

@media print
{
.blankdiv {page-break-after:always}
}
于 2013-11-07T16:41:07.140 回答
0

尝试在样式表中添加打印 @media查询并调整容器的宽度：

@media print {
  .container {
    width: 20%;
  }
}
于 2013-11-07T16:30:49.317 回答