Google可视化数据表的可打印版本

这就是我解决这个问题的方法。我不会接受我自己的答案,以防有人有更优雅的东西。

最初我有:

var visualization = new google.visualization.Table(document.getElementById('table'));
visualization.draw(data, {
    sort: "disable",
    allowHtml: true,
    showRowNumber: true,
    page: "enable",
    pageSize: 9
});

我添加了另一个到一个我将用CSS隐藏的分区的。

//Create a second Visualization that Will be hidden.
   var visualization = new google.visualization.Table(document.getElementById('printerFriendly'));
visualization.draw(data, {
    sort: "disable",
    allowHtml: true,
    showRowNumber: true,
    page: "disable"
});

然后我将以下规则添加到我的一个CSS文件中。

 @media print  
    {
        #table{ display:none; }
    }
 @media screen
    {
         #printerFriendly{ display:none;}
    }

这将在正常使用时隐藏一个表,在打印时隐藏另一个表。我希望有比这更干净的东西,但这个解决方案很容易实现。

有几种方法可以做到。

如果只需更改CSS样式就可以更改页面“打印机友好型”所需的更改,则只需为打印介质添加另一个样式表:

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

这是一种非常简单和透明的方法:将用于打印的打印介质样式表,而原始样式表将用于Web查看。

所以你可以改变事物的显示方式,甚至可以切换可见性,不管它是在网上查看还是打印出来……这会让你找到你需要的地方。

老实说,我不太熟悉你在做什么,但听起来用户必须为每个页面提出一个新的请求…在这种情况下,只是CSS样式对你没有帮助。

你要么让信息在一个页面上全部可用(只是部分不可见),要么在应用程序中设置一个函数,或者一个选项,等等,它可以输出一个打印机友好的版本。