打印 Google 个图表以占满整页

Question

我正在开发一个应用程序，该应用程序使用 openResiazbleWindow() 打开一个显示 google 图表的 window。 window 的大小已设置，我不想更改它，因为大小看起来已经不错了。但是我遇到了一个问题，当它打印出来时，它只占了页面的四分之一。我试图让它全屏打印出来，但当我试图将 CSS 添加到 div 时，这没有帮助。我最接近的解决方案是向 onresize 事件添加一个函数，我在其中重新绘制图表。但是，浏览器似乎不将打印计为调整大小。我有什么想法可以做到这一点？下面的相关代码。

<style>
.bottn {
 overflow: hidden;
 margin-left: 10px; }
 @media print {
 @page {size: landscape;}
 .bottn{
  visibility: hidden;
}
rect
{
 width: 100% !important;
 height: 100% !important;
}
}
</style>
....
<script>google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawTempChart);
function drawTempChart() {
var DATA = google.visualization.arrayToDataTable([
  ......
], false);
 var data = DATA;
var options = {
 width:"100%",
 height:"100%",
 title: 'Harsh Acceleration Report',
 hAxis: { 
 title: 'Vehicles',
  },
 vAxis: {
   title: 'Harsh Acceleration Events' 
 }
 };
 var chart = new google.visualization.ColumnChart(document.getElementById('graph'));
 chart.draw(data, options);
}
 window.onresize = function(event) {
 drawTempChart();
 }
 </script>
 ....
 <body>
  <a class='bottn' href='javascript:window.print();'>Print</a><div id="graph" style="width: 100%; height: 100%";></div>
 </body>

有什么想法吗？

Answer 1

绘制图表两次。一旦你完成了，一旦在一个更大尺寸的隐藏 div 中。使用@media 打印指令隐藏视觉 div 并显示打印 div.

类似这样的伪造，我只在非打印 div 上设置 width/height 来向您展示：

<html>
<head>
    <style>
        .print {display:none;}
        @media print {
        .noprint {display:none;}
        .print {display:block;}
        }
    </style>
</head>
<body>
    <div class="noprint" style="width:480px;height:350px;background-color:yellow;">
        <p>I am a smaller div that does not print</p>
    </div>
    <div class="print" style="width:960px;height:700px;background-color:red;">
        <p>I am a large div that does print</p>
    </div>
</body>
</html>

打印 Google 个图表以占满整页

Print Google Chart to Take up Full Page

javascript

css

printing

google-visualization