【问题标题】:How to print a image file in printer如何在打印机中打印图像文件
【发布时间】:2010-04-30 03:37:21
【问题描述】:

我写了一个简单的程序在 JSF 中打印图像....

我有一张图片 (sampleImage.png).. 我已经将我的电脑连接到打印机....

我手动打开图像并选择打印选项,然后我从打印机获取图像....

现在我想使用 javascript 打印图像....

文件名:imagePrint.jsp

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Printer</title>          
        <script type="text/javascript">
             function printImage()
            {                                       
               // Here i want write a script for print image                              
            }
        </script>

    <body>
        <h:form id="fileViewerForm">
            <rich:panel>
                <f:facet name="header">
                    <h:outputText value="Printer"/>
                </f:facet>

                <h:commandButton value="PrintImage" onclick="printImage();"/>

                   <rich:panel id="imageViewerPanel">                               
                       <h:graphicImage id="imageViewer" value="sampleImage.png" url="sampleImage.png"/>             
                  </rich:panel>                                       
            </rich:panel>
        </h:form>
    </body>
</html>

帮我解决这个问题..

以下用于将文本区域打印到打印机的脚本..... 所以我需要打印图像

            function printText()
            {
                alert("Text Area print to printer start....");
                var textElem = document.getElementById("fileViewerForm:textAreaGrid1").innerHTML;
                alert("Text Area Content : " + textElem);

                if(textElem.toLowerCase().indexOf("<textarea", 0) != -1)
                {
                    textElem = document.getElementById("fileViewerForm:fileContent1").value;
                    var regExp = /\n/gi;
                    textElem = textElem.replace(regExp,'<br>');
                }
                popup = window.open('','popup','toolbar=no,menubar=no,width=200,height=150');
                popup.document.open();
                popup.document.write("<html><head></head><body onload='print()'>");
                popup.document.write(textElem);
                popup.document.write("</body></html>");
                popup.document.close();
            }             

【问题讨论】:

    标签: javascript image printing


    【解决方案1】:

    您将收到同时使用的图像 ID h:form 和 h:graphicImage 标签 id 的

    Java 脚本是:

     function printImage()         
     {            
       var iamgeId = document.getElementById('fileViewerForm:imageViewer');
    
       var imagObject = new Image();
       imagObject = iamgeId;
       var originalImage = '<img id="imageViewer" src="'+imagObject.src+'" 
                            height="'+imagObject.height+'"
                             width="'+imagObject.width+'" />';
    
       popup =  window.open('','popup','toolbar=no,menubar=no,width=200,height=150');
       popup.document.open();
       popup.document.write("<html><head></head><body onload='print()'>");
       popup.document.write(originalImage);
       popup.document.write("</body></html>");
       popup.document.close();           
    }
    

    JSF 代码是:

      <h:commandButton value="Print" onclick="printImage();"/><br>
           <rich:panel id="imageViewerPanel">                
    
                <h:graphicImage id="imageViewer" url="sampleImage.png"
                                value="sampleImage.png" width="200"
                                                         height="200" />
           </rich:panel>
      </h:panelGrid>
    

    它适用于 FireFox 3.0.18。

    作者,
    Eswara Moorthy,NEC。

    【讨论】:

      【解决方案2】:

      您将无法使用 javascript 进行打印,因为您无法从浏览器管理硬件设备并且它会在那里执行。

      【讨论】:

      • 感谢您的回复...现在您可能会再次看到我的帖子...我已经编写了用于打印文本区域内容的脚本...
      【解决方案3】:

      您可以将其发送到浏览器

         window.print();
      

      由浏览器决定做什么。

      要打印页面的特定部分,请考虑打印样式表。使用media 属性可以让您使某个文件只打印样式。

      <link rel="stylesheet" href="/assets/css/print.css" media="print" />
      

      【讨论】:

      • 嗨,这个方法是用来打印全窗口的...但我只需要打印特定的图像..例如,在我的页面上有徽标...所以我只需要打印徽标, 不是页面的全部内容...
      • 我是新来的。我看不懂……我在css文件中写入了什么内容……
      猜你喜欢
      • 2014-03-25
      • 1970-01-01
      • 1970-01-01
      • 2011-09-07
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-11-10
      • 2018-11-14
      相关资源
      最近更新 更多