Question

我有一个自定义路由应用程序，可以从谷歌地图获取路线信息。然后，它会创建一个Google Visualizations DataTable来保存路径中的所有步骤。

我目前的问题是，为了减少非常大的路由的溢出，我在DataTable的选项中启用了分页。这导致打印机不太友好，因为只打印表中显示的部分数据。当您单击prev和next时，API会动态加载表的其他部分。

在没有牺牲启用分页的能力的情况下，是否有一种不太难的方法让DataTable对打印机友好？

Answer 1

这是我最终解决这个问题的方式。我不会接受我自己的答案，万一有人有更优雅的东西。

原来我有：

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

我添加了另一个用div隐藏的div。

//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;}
    }

在正常使用期间隐藏一个表，在打印期间隐藏另一个表。我希望有一些比这更清洁的东西，但这个解决方案很容易实现。

Answer 2

有几种方法可以做到。

如果为了使页面“打印机友好”所需的更改可以完全通过更改CSS样式来完成，那么您需要做的就是为打印介质添加另一个样式表：

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

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

因此，您可以更改内容的显示方式，甚至切换可见性，无论是在网上查看还是打印......都可以让您找到所需的位置。

说实话，我不太熟悉你正在做的事情，但听起来用户必须为每个页面提出新的请求......在这种情况下，只有CSS样式对你没有帮助。

您必须要么在一个页面上提供所有信息（只是部分不可见），要么在应用程序中设置一个功能，或者选择一个可以打印出适合打印的版本的选项。

Answer 3

@media print 
   {
      #table > div > div { overflow: visible !important; }
   }

这将解决您的问题。

说明： #id下方用于创建表的2'div具有overflow: auto。这将导致信息适合此块。将其更改为overflow: visible将显示其内容。检查它如何在developer.mozilla.org/zh-CN/docs/Web/CSS/overflow上运行

可视化版本的Google Visualizations DataTable

3 个答案: