6

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

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

编辑：如果我只能在客户端使用 Mozilla Firefox 时通过 Firefox 打印它，那将会很有帮助。

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

这就是弹出窗口显示文本的方式以及我想要打印文本的方式预览

非常感激！

4

4 回答 4

7

您可以使用 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);
?>

看这个链接...

该文件将文本作为获取参数垂直打印，如下所示：

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

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

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

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

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

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

在此处输入图像描述

希望有帮助...

于 2013-08-18T08:42:55.247 回答
7

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

  • 火狐 23 (Win7, OSX)
  • 铬 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

WFM：旋转打印

于 2013-08-19T00:59:32.173 回答
1

这应该有效。以下内容已在 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 的东西）不喜欢这样。

于 2013-08-19T01:03:21.610 回答
1

如果您的文本在屏幕上显示时旋转，但在打印时没有旋转，则可能是您的 CSS 仅应用于媒体screen而不是print媒体。

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

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

screen如果您希望 CSS 文件不仅仅针对计算机屏幕，请避免使用：

<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

干杯!

于 2013-08-22T10:07:02.953 回答