从网页打印旋转的文本

Question

我运行一个为用户生成一些报告的Web应用程序。对于其中一个报告，我需要打印90度旋转的文本。我尝试了很多方法，但还没有找到正确打印方法。我可以使用下面的css类在90度旋转的弹出窗口上显示文本，但是当它像往常一样被发送到打印机时，文本将旋转到正常形式并打印出来。我理解打印机没有打印的原因，因为它显示在浏览器上，但我有什么方法可以做到这一点？此站点的脚本语言是PHP。

更新：我可以在静态页面上打印旋转的文本，但在弹出窗口时无法打印旋转的文本。实际上现在我需要帮助打印一个CSS样式完整的页面

编辑：如果我只能通过Firefox打印它，因为客户端使用Mozilla Firefox，它甚至会有用。

.rotate{
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    width:400;
    height:400;
}

这是弹出窗口显示文本的方式以及我打算如何打印文本

非常感谢！

Answer 1

嗯......这对我有用......经过测试：

• Firefox 23（Win7，OSX）
• Chrome 28（Win7，OSX）
• Safari 6（OSX）

不可否认，我实际上并没有打印它，而是将打印输出重定向到PDF（操作系统级功能;与Firefox无关）。

确保定义轮播的规则没有附加{{}}}，从而在media="print"中禁用它们。

我使用了以下示例文档，它是一个方便的数据URI：

data:text/html,%3Cp%20style=%22%20-webkit-transform:%20rotate%28-90deg%29;%20transform:%20rotate%28-90deg%29;%20border:%201px%20solid%20red;%20padding:%201ex;%20width:%20100px;%20%22%3Etest%20rotate%3C/p%3E

Answer 2

您可以使用PHP生成旋转文本的图像，然后将其打印出来。 关于图像的一个很酷的事情是它根本不依赖于浏览器。有一些解决方案（在这个线程中已经提到）可以工作，但仅在少数最新的浏览器上进行测试。只要浏览器可以打印图像，这个解决方案就不关心浏览器，只有它可以帮助支持PHP5的服务器。

以下是您的PHP文件（image_gen.php）的外观：

<?php
// create a 100*100 image
$im = imagecreatetruecolor(100, 100);

// Write the text
$textcolor = imagecolorallocate($im, 0xFF, 0xFF, 0xFF);
imagestringup($im, 3, 40, 80, $_GET['text'], $textcolor);
header('Content-type: image/png');
// Save the image
imagepng($im);
imagedestroy($im);
?>

请参阅this link...

此文件将文本作为get参数垂直打印，如下所示：

  

http://example.com/example.html?text=This+Is+The+Text+To+Be+Printed+Vertically

并返回垂直打印的文本图像。因此，您可以在要打印的主HTML文件中执行此操作：

<img src = "image_gen.php?text=Hello world">

请注意：示例代码中指定的值只是示例值，文本和颜色，根据您的目的进行更改...

这就是您将该图像插入HTML文件的方式。现在，当您打印该图像时，您必须按原样打印图像，即使用垂直文本...

在这里，我打印出来并拍下了一张照片，向你展示它确实有效，我知道文字不清晰，但你可以看出它是垂直的。

希望有所帮助...

Answer 3

这应该有效。 以下内容已在Chrome中测试过：

 <script type="text/javascript">
      var printWindow = window.open();
      printWindow.document.write('<style type="text/css">\
              .rotate{\
              -webkit-transform: rotate(-90deg);\
              -moz-transform: rotate(-90deg);\
              filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);\
              width:400;\
              height:400;\
          }\
    </style>\
    <div class="rotate">Rotated Content</div>');

    printWindow.print();
 </script>

（注意我把反斜杠放进去了。）

如果您只想拥有一个不可见的打印框（用户单击按钮并显示打印对话框），请使用iframe。请注意Opera（可能直到他们切换到WebKit的东西）不喜欢这个。

Answer 4

如果您的文字在屏幕上显示时已旋转，而在打印时则无法旋转，则可能是您的CSS仅适用于screen，而不适用于print媒体。< / p>

确保在media标记中将all属性值设置为<link>：

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

如果您希望CSS文件的目标不仅仅是计算机屏幕，请避免使用screen：

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

您还可以拥有两个专用的CSS文件，一个用于计算机屏幕，另一个用于打印，可以让您更好地控制：

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

有关media属性的更多信息：http://www.w3schools.com/tags/att_link_media.asp

干杯！