通过 FireFox 打印带有 html 图表的表格

Printing table with charts in html through FireFox

本文关键字:表格 html FireFox 打印 通过      更新时间:2023-09-26

我有下一个问题:
我有一个表格,里面有图表和表格,它在浏览器中显示得很好。但是当我尝试在 mozila 中打印它(我需要将其打印为 pdf)时,正在切割 3rd 速度,因此它只显示 2.5 速度。
选项"缩小以适合"无济于事,如果比例为 100%,我有问题,如果我放 70% 或更少 - 我可以看到所有 3 个速度测量,但其他文本太小。其他表格和内容根据比例完美呈现。有没有办法解决这个问题?这是关于 FireFox 浏览器的 - 我完全需要他,但我也在 Chrome 中尝试过 - 他只是使用自动缩放,但它仍然占大约 70%。
那么有没有办法在打印时缩放图表呢?设置图表的确切px大小对于我的问题来说是个坏主意。
这是图表速度测量表的链接我认为问题是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>

尝试将打印@media查询添加到样式表并调整容器的宽度:

@media print {
  .container {
    width: 20%;
  }
}

如果你的工作被切断了,在你的代码之间的设定点添加空的div,以确保它在每个打印的页面上保留某些内容。

将此 CSS 添加到空白div:

@media print
{
.blankdiv {page-break-after:always}
}