通过 FireFox 打印带有 html 图表的表格
Printing table with charts in html through FireFox
我有下一个问题:
我有一个表格,里面有图表和表格,它在浏览器中显示得很好。但是当我尝试在 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}
}
相关文章:
- 将HTML表格导出到excel时,无法将数据加载到excel文件中
- 打印预览没有应用程序页眉和页脚的html表格
- 将HTML表格导出到带有文本和图像的excel中
- JS图表和html表格重叠
- 带有单选按钮的html表格复制粘贴到xls中
- 应用程序脚本中导入HTML的数据擦除;谷歌表格
- HTML/JavaScript表格标题
- 如何使用谷歌脚本将html表单数据保存到谷歌电子表格中
- 如何在HTML中制作带导航的表格
- HTML表格导出为具有适当列宽和字体的pdf
- html表格的浮动水平滚动条
- 使用HTML / Javascript将Web应用程序生成的图表/表格转换和导出到可编辑的Powerpoint(.ppt
- 如何在不导致 HTML 表格失真的情况下正确使用追加
- 如何使用 JQuQuery 解析 JSON 对象并在 HTML 页面中以表格格式打印输出
- ModalDialog:HTML表格应该是可滚动的,而不是整个页面
- HTML表格在打印后缺少边框颜色和背景颜色
- 如何将表格html表格导出为PDF
- 从下拉列表中选择所选值后显示表格 (HTML)
- 导入Excel文件到表格HTML页面
- 用javascript将表格html转换为Excel