1

我有一个高尔夫记分卡生成器。从结构上讲，该页面有一个 .printarea 类的 div 包装了一个 1072px 宽的表格。

我已经逐渐得到它，因此打印在所有主要浏览器中都以横向显示单个页面。

在 Firefox 中，如果在 BODY 上指定了旋转和缩放，那么缩放将无法工作。所以我将旋转移动到包含其他所有内容的 DIV。这实现了旋转但偏移了表格，因此右侧（表格底部）和顶部（表格右侧）发生了一些裁剪。

我试图用边距和绝对定位来纠正这个问题，但这导致表格的小块不连贯的部分被分流到第二页。将比例缩小到很小的比例也不会解决第二页的位置问题。

使用原始设置我最终得到了position:absolute; -moz-transform-origin: 400px 900px; 这会丢失表格顶部（页面左侧）的一部分并取代最后两行，尽管事实上表格的底部（页面右侧）距离边缘很容易 3 英寸纸。即使缩小到很小的比例也不能纠正位移。

这是一张卡片的静态副本：http: //egolfplan.com/example.html

在帖子的最后，我将添加打印的 PDF 屏幕截图。

当前的 CSS

<style type="text/css" media="print">
    BODY {
        width:100%;
        height:100%;
        -webkit-transform: rotate(-90deg) scale(.68,.68); 
        -moz-transform:scale(.48,.48);
         zoom: 60%;
    }
    .printarea {
        width:100%;
        height:100%;
        -moz-transform:rotate(-90deg);
    }
    @page {margin: 0;}

 </style>

这被缩放到 68%

在此处输入图像描述

扩大到 48%

在此处输入图像描述

-moz 变换原点：400 像素 900 像素；

在此处输入图像描述

4

4 回答 4

1

一般来说，我认为通过 CSS 进行旋转是不可靠的，因为浏览器实现不同，尤其是在您的情况下，因为您使用的是浏览器特定的属性。

我会做以下事情之一。

  1. 使用强大的 javascript 库，例如 jQuery Rotate (http://code.google.com/p/jquery-rotate/) 而不是 CSS。

  2. 编写一些服务器端代码，实际生成此记分卡的图像，可以轻松缩放或旋转。例如，PhP 可以做到这一点。

  3. 更改您的设计以避免出现垂直文本。

于 2011-12-13T19:36:13.727 回答
1

由于您必须使用特定的供应商属性并且它们会呈现不同，我建议您使用 CSSSandpaper。本文讨论您的需求：http ://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/

于 2011-12-19T12:20:55.200 回答
1

Firefox 似乎在应用打印样式表之前确定打印分页符。这导致将比例变换应用于每个打印页面而不是整体块。

于 2012-07-09T17:20:59.610 回答
0

我们最终使用 Browshot.com 将每张卡片呈现为 JPEG 屏幕截图，并将其作为下载发送给用户。

于 2012-07-31T21:07:54.467 回答