Question

我有运动时间表，我希望用户能够在2或4页上打印出来。拥有大量团队的锦标赛会产生难以阅读的文字，因为没有足够的空间。

不确定如何使用d3js生成可打印内容，我应该指定展示位置和大小的值，以像素为单位，厘米，百分比？百分比听起来不错但需要插入分页符元素，可能为每个页面提供单独的svg。找不到关于如何做到这一点的好文章，我想知道我是否错过了什么。

代码应该生成带有文本标签的行，以便在2页上适合所有标签中的文本非常小，因此想要提供4页版本。所以我的问题是：最好的方法是什么？

我正在考虑使用page-break-after css样式提供4或2个svg元素。形状和尺寸大致为字母或a4横向，放置单位基于百分比。

[UPDATE]

由于pageSet and page元素似乎被Firefox（和inkscape）忽略并被Chrome错误解释，我尝试了多个svg。这似乎打印在我的新的但不是最新的Firefox和Chrome上。我使用的代码是：

<html><head>
    <title>Test tournament bracket</title>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <style>
      @media print {
        .noPrint {display:none;}
      }
    </style>
  </head>
  <body>
    <div class="noPrint">
        <h1>Forms and non printable content</h1>
    </div>
    <svg width="70" height="55">
        <text x="10" 
          y="10" font-family="sans-serif" 
          font-size="12px" fill="black">
          Hello
        </text>
    </svg>
    <div style="page-break-after: always;"></div>
    <svg width="70" height="55">
        <text x="10" 
          y="10" font-family="sans-serif" 
          font-size="12px" fill="black">
          World
        </text>
    </svg>
  </body></html>

请试一试，看看结果如何。

d3js和svg用于打印到多个页面

0 个答案: