从网页打印旋转的文字 [英] Printing rotated text from web page

问题描述

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

更新：我可以打印在静态页面上旋转的文本，但不能打印在弹出窗口中旋转的文本向上。其实现在我需要帮助来打印完整的CSS样式的页面。

编辑：如果我只能通过Firefox打印，客户端使用Mozilla Firefox。

  .rotate {
 -webkit-transform：rotate（-90deg）; 
 -moz-transform：rotate（-90deg）; 
 filter：progid：DXImageTransform.Microsoft.BasicImage（rotation = 3）; 
 width：400; 
身高：400; 
 
 $ / code> 

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

非常感谢！

解决方案

嗯...这对我有效...测试：

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

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

确保定义轮换的规则没有一些 media =print中禁用它们。使用下面的示例文档，这是一个方便的数据URI：

  data：text / html，％3Cp％20style = ％22％20-WebKit的变换：％20rotate％28-90deg％29; 2％ 0transform：％20rotate％28-90deg％29;％20border：％201px％20solid％20red;％20padding：％201ex;％20width：％20100px;％20％22％3Etest％20rotate％3C / p％3E 
  

I run a web application that generates some reports for users. For one of those reports, I need to print the text rotated 90 degree. I've tried many ways but have not found a way to print it properly. I can display text on that pop-up 90 degree rotated with the css class below but when it's sent to printer as usual the text is rotated to normal form and printed. I understand the reason printer is not printing as it's displayed on the browser but is there any way I can do that? Scripting language for this site is PHP.

UPDATE: I can print text rotated that's on a static page but can't print text rotated when it's on a pop up. Actually now I need help to print a page with CSS styling intact

Edit: It will be even helpful enough if I can print it via Firefox only as the client uses Mozilla Firefox.

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

This is how the pop-up shows the text and how I want to print the text

Much appreciated!

解决方案

Hmm... This works for me... Tested on:

• Firefox 23 (Win7, OSX)
• Chrome 28 (Win7, OSX)
• Safari 6 (OSX)

Admittedly I didn't actually print it, but redirected the print output to PDF (OS-level feature; nothing to do with Firefox).

Make sure that your rules defining the rotation do not have some media query attached disabling them in media="print".

I used the following example document, which comes as a handy data-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

这篇关于从网页打印旋转的文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！