2013-08-15 14 views
6

से मुद्रित पाठ मुद्रित करना मैं एक वेब एप्लिकेशन चलाता हूं जो उपयोगकर्ताओं के लिए कुछ रिपोर्ट उत्पन्न करता है। उन रिपोर्टों में से एक के लिए, मुझे 90 डिग्री घुमाए गए पाठ को मुद्रित करने की आवश्यकता है। मैंने कई तरीकों की कोशिश की है लेकिन इसे ठीक से प्रिंट करने का कोई तरीका नहीं मिला है। मैं नीचे की सीएसएस कक्षा के साथ घूमते हुए उस पॉप-अप 90 डिग्री पर टेक्स्ट प्रदर्शित कर सकता हूं लेकिन जब इसे सामान्य रूप से प्रिंटर पर भेजा जाता है तो पाठ सामान्य रूप से घुमाया जाता है और मुद्रित किया जाता है। मैं समझता हूं कि प्रिंटर प्रिंट नहीं कर रहा है क्योंकि यह ब्राउज़र पर प्रदर्शित होता है लेकिन क्या मैं ऐसा कर सकता हूं? इस साइट के लिए स्क्रिप्टिंग भाषा PHP है।वेब पेज

अद्यतन: मैं एक स्थिर पृष्ठ पर घुमाए गए पाठ को मुद्रित कर सकता हूं लेकिन पॉप अप होने पर पाठ घुमाया नहीं जा सकता। दरअसल अब मुझे सीएसएस स्टाइलिंग के साथ एक पृष्ठ मुद्रित करने में मदद की आवश्यकता है

संपादित करें: अगर मैं इसे फ़ायरफ़ॉक्स के माध्यम से प्रिंट कर सकता हूं तो यह उपयोगी भी होगा क्योंकि क्लाइंट मोज़िला फ़ायरफ़ॉक्स का उपयोग करता है।

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

यह कैसे पॉप-अप पाठ भी दिखाती है कि मैं पाठ Preview

बहुत सराहना की प्रिंट करना चाहते है!

+0

क्या आपने पॉपअप कहा था? यही है, क्या आपका मतलब यह हमेशा दिखाई नहीं देता है? –

+0

@Mrlister "rotaion" को नोट करने के लिए धन्यवाद :) हाँ, यह एक पॉप-अप है, जब इस वेब पेज पर एक प्रिंट बटन क्लिक किया गया है – Fallen

+0

हां, तो आपको मुद्रित होने पर इसे हमेशा दिखाई देना होगा, क्योंकि उपयोगकर्ता 2641697 कहता है। प्रिंटिंग दिनचर्या दबाए बटन के बारे में नहीं जानता है। –

उत्तर

7

हम्म ... यह मेरे लिए काम करता ...

  • फ़ायरफ़ॉक्स 23 (Win7, OSX)
  • क्रोम 28 (Win7, OSX)
  • सफारी 6 (OSX)

वैसे मैं वास्तव में इसे प्रिंट नहीं था, लेकिन: पर परीक्षण किया गया प्रिंट आउटपुट को पीडीएफ में रीडायरेक्ट किया गया (ओएस-स्तरीय फीचर; फ़ायरफ़ॉक्स के साथ कुछ भी नहीं)।

सुनिश्चित करें कि रोटेशन को परिभाषित करने वाले आपके नियमों में को media="print" में अक्षम करने से जुड़ा हुआ नहीं है।

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: rotate print

6

आप घुमावदार पाठ की एक छवि उत्पन्न करने के लिए 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...

इस फ़ाइल में पाठ में ले जाता है एक प्राप्त पैरामीटर इसलिए की तरह के रूप में खड़ी मुद्रित करने के लिए:

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

और यह लंबवत मुद्रित उस पाठ की एक छवि देता है।

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

कृपया ध्यान दें:: तो आपको लगता है कि आप प्रिंट करना चाहते आपकी मुख्य HTML फ़ाइल में ऐसा कर सकते हैं मूल्यों उदाहरण कोड में निर्दिष्ट सिर्फ नमूना मानों, पाठ और रंग हैं, उन्हें बदलने के उद्देश्य के अनुसार ...

ताकि आप अपनी छवि को अपनी HTML फ़ाइल में कैसे सम्मिलित कर सकें। अब जब आप उस छवि को मुद्रित करते हैं, तो आपको छवि के रूप में प्रिंट किया जाना चाहिए, यानि लंबवत पाठ के साथ ...

यहां, मैंने एक प्रिंट आउट लिया और यह दिखाने के लिए एक तस्वीर पर कब्जा कर लिया कि यह वास्तव में काम करता है, मैं पता है कि पाठ स्पष्ट रूप से दिखाई नहीं दे रहा है, लेकिन आप यह कर सकते हैं कि यह लंबवत है।

enter image description here

आशा व्यक्त की कि मदद करता है ...

1

यह काम करना चाहिए:

मैं निम्न उदाहरण दस्तावेज है, जो एक आसान डेटा यूआरआई के रूप में आता इस्तेमाल किया। निम्नलिखित क्रोम में परीक्षण किया गया है:

<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> 

(सूचना मैं बैकस्लैश डाल में प्रवेश करती है से बचने के लिए।)

आप केवल एक अदृश्य प्रिंट फ्रेम हैं तो (उपयोगकर्ता एक बटन और एक प्रिंट पर क्लिक करता है संवाद प्रकट होता है), एक आईफ्रेम का उपयोग करें। बस ध्यान दें कि ओपेरा (संभवतः जब तक वे वेबकिट सामान पर स्विच नहीं करते हैं) इसे पसंद नहीं करते हैं।

1

यदि आपकी स्क्रीन पर प्रदर्शित होने पर आपका टेक्स्ट घुमाया गया है, लेकिन प्रिंट करते समय नहीं, तो यह हो सकता है कि आपका सीएसएस केवल screen पर लागू हो और print मीडिया पर लागू न हो।

अपने <link> टैग में all को media विशेषता मान सेट करने के लिए सुनिश्चित करें:

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

और screen उपयोग करने से बचें अगर आप सिर्फ कंप्यूटर स्क्रीन की तुलना में अधिक लक्षित करने के लिए अपने सीएसएस फ़ाइल हैं:

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

आपके पास दो समर्पित सीएसएस फ़ाइलें भी हो सकती हैं, एक कंप्यूटर स्क्रीन के लिए, और प्रिंटिंग के लिए, आपको अधिक नियंत्रण की अनुमति मिल सकती है:

विशेषता के बारे में
<link rel="stylesheet" type="text/css" href="style.css" media="screen"> 
<link rel="stylesheet" type="text/css" href="style-print.css" media="print"> 

और जानकारी: http://www.w3schools.com/tags/att_link_media.asp

चीयर्स!