In văn bản được xoay từ trang web

Question

Tôi chạy một ứng dụng web tạo một số báo cáo cho người dùng. Đối với một trong những báo cáo đó, tôi cần in văn bản được xoay 90 độ. Tôi đã thử nhiều cách nhưng chưa tìm được cách in đúng cách. Tôi có thể hiển thị văn bản trên đó bật lên 90 độ xoay với lớp css dưới đây nhưng khi nó được gửi đến máy in như bình thường văn bản được xoay sang hình thức bình thường và in. Tôi hiểu lý do máy in không in vì nó được hiển thị trên trình duyệt nhưng có cách nào tôi có thể làm điều đó không? Ngôn ngữ kịch bản cho trang web này là PHP.

CẬP NHẬT: Tôi có thể in văn bản được xoay trên trang tĩnh nhưng không thể in văn bản được xoay khi cửa sổ bật lên. Hiện tại, tôi cần trợ giúp để in một trang có kiểu dáng CSS nguyên vẹn

Chỉnh sửa: Sẽ đủ hữu ích nếu tôi có thể in nó qua Firefox chỉ khi khách hàng sử dụng Mozilla Firefox.

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

Đây là cách các cửa sổ pop-up hiển thị văn bản và làm thế nào tôi muốn in văn bản

nhiều đánh giá cao!

Answer 1

Hmm ... này làm việc cho tôi ...Thử nghiệm trên:

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

Phải thừa nhận rằng tôi đã không thực sự in nó, nhưng chuyển hướng đầu ra in sang PDF (tính năng cấp độ hệ điều hành; không có gì để làm với Firefox).

Đảm bảo rằng các quy tắc của bạn xác định vòng quay không có một số media query đã vô hiệu hóa chúng trong media="print".

tôi đã sử dụng tài liệu ví dụ sau, mà đến như là một tiện dụng dữ liệu 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

Bạn có thể sử dụng PHP để tạo hình ảnh của văn bản được xoay và sau đó in. Điều thú vị về hình ảnh là nó không phụ thuộc vào trình duyệt. Có một số giải pháp (đã được đề cập trong chủ đề này) hoạt động, nhưng chỉ được thử nghiệm trên một vài trình duyệt mới nhất. Giải pháp này không quan tâm đến trình duyệt miễn là trình duyệt có thể in hình ảnh, chỉ có nó phiền về một máy chủ có thể hỗ trợ PHP5.

dưới đây là cách tập PHP của bạn (image_gen.php) nên xem xét:

<?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); 
?> 

Xem this link...

tập tin này có trong văn bản in theo chiều dọc như một tham số get như vậy:

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

và nó trả về một hình ảnh của văn bản đó được in theo chiều dọc. Vì vậy, bạn có thể làm điều này trong tập tin HTML chính của bạn mà bạn muốn in:

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

XIN LƯU Ý: các giá trị quy định tại các mã ví dụ là những giá trị chỉ mẫu, văn bản và màu sắc, thay đổi chúng theo mục đích của bạn ...

để đó là cách bạn chèn hình ảnh đó vào tệp HTML của mình. Bây giờ khi bạn in hình ảnh đó, bạn phải có được hình ảnh được in như vậy, tức là với văn bản dọc ...

Ở đây, tôi lấy một bản in ra để chụp cho bạn thấy nó thực sự hoạt động, tôi biết rằng văn bản không hiển thị rõ ràng, nhưng bạn có thể hiểu rằng văn bản là dọc.

hy vọng rằng sẽ giúp ...

Answer 3

này nên làm việc. Sau đây đã được thử nghiệm trong 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> 

(Chú tôi đặt dấu xồ nguợc để thoát đi vào.)

Nếu bạn chỉ muốn có một khung in vô hình (người dùng nhấp vào một nút và một bản in xuất hiện), sử dụng khung nội tuyến. Chỉ cần lưu ý rằng Opera (có lẽ cho đến khi họ chuyển sang công cụ WebKit) không thích điều này.

Answer 4

Nếu văn bản của bạn được xoay khi hiển thị trên màn hình, nhưng không phải khi in, thì có thể là CSS của bạn chỉ được áp dụng cho screen chứ không phải cho phương tiện truyền thông print.

Hãy chắc chắn để thiết lập giá trị media thuộc tính để all trong <link> tag của bạn:

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

Và tránh sử dụng screen nếu bạn muốn tập tin CSS của bạn để nhắm mục tiêu nhiều hơn chỉ là màn hình máy tính:

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

Bạn cũng có thể có hai tệp CSS chuyên dụng, một tệp cho màn hình máy tính và một tệp để in, cho phép bạn kiểm soát nhiều hơn:

Thông tin

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

Thông tin thêm về các thuộc tính media: http://www.w3schools.com/tags/att_link_media.asp

Cheers!