2012-03-19 28 views
1

私はcustome htmlコードを渡して文書を印刷したいと思います。印刷htmlからjavascript/jquery

私が書かれている非稼働コード:

function Clickheretoprint() 
{ 
    var disp_setting="toolbar=yes,location=no,directories=yes,menubar=yes,"; 
     disp_setting+="scrollbars=yes,width=780, height=780, left=100, top=25"; 
    var content_vlue = document.getElementById("result_tbl").innerHTML; 

    var docprint=window.open("","",disp_setting); 
    docprint.document.open(); 
    docprint.document.write('<html><head><title>Ashley Mattresses</title>'); 
    docprint.document.write('</head><body onLoad="self.print()"><center>');   
    docprint.document.write('<TABLE width="100%" cellpadding=10 align=center valign="top"><TR valign="top"><TD width = "33%" valign="top">col1</TD><TD width = "33%" valign="top">col2</TD><TD width = "33%" valign="top">col3</TD></TR></TABLE>');  
    docprint.document.write('</center></body></html>'); 
    docprint.document.close(); 
    docprint.focus(); 
    docprint.close(); 
} 

これは私がアンカータグのhrefに呼び出されますが、仕事が終らない方法である。

<a href="javascript:Clickheretoprint()"> 

私はjavascript/jQueryコーディングの新しいビーです。緊急の必要条件として、これを修正したり、アプローチを提案したりして、これを達成するのを手伝ってください。

ありがとうございます。

+2

NO OH ITが緊急であるために正常に動作しますか?何が効いていないのですか?コンソールにエラーがありますか?新しいウィンドウなしでページ上の特定のものだけを印刷することが可能であることをご存じですか? CSSプリントメディアを見てください。 – epascarello

+0

@epascarello ya少し修正して再チェックし、Firefoxで動作することがわかりましたが、google-chromeでは動作していません。以前はクロムそのものをテストしていたので、印刷物を手に入れることができませんでした。しかし、また、要件はクロムブラウザだけで、あなたは私にウェイアウトをお勧めしますか? また、CSSプリントメディアの提案のおかげで、それは素晴らしいですし、間違いなくこの機能が必要です。 – HarsH1610

+0

回答#2は正しいですが、追加する必要があります:var disp_setting = "menubar = no; status = no; toolbar = no;";またはあなたの選択の設定 –

答えて

7

あなたは正しい方向にあります。

var docprint=window.open("about:blank", "_blank", disp_setting); 
var oTable = document.getElementById("result_tbl"); 
docprint.document.open(); 
docprint.document.write('<html><head><title>Ashley Mattresses</title>'); 
docprint.document.write('</head><body><center>'); 
docprint.document.write(oTable.parentNode.innerHTML); 
docprint.document.write('</center></body></html>'); 
docprint.document.close(); 
docprint.print(); 
docprint.close(); 

Live test case:あなたがそのようなコードを持って最初に、そのまま印刷<div>タグ例えば:

<div> 
    <table id="result_tbl"> 
     ..... 
    </table> 
</div> 

で要素をラップしたい要素のIDをresult_tblをされると仮定します。クローム18の下で私のために正常に動作し

print is working

+0

努力してくれてありがとう、実際のテストケースをチェックしました、あなたは上に提供しています、それはmozilla-firefoxでうまくプリントしますが、クロムで同じことをすることができません。 – HarsH1610

+0

@ HarsH1610 Chrome 18ここでは、ボタンをクリックするだけでブラウザの印刷ページが開きます。 –

+0

あなたはこれをチェックしてください:クロムの印刷ページでは、印刷ボタンは無効で、ページの印刷プレビューはありません。それはあなたの終わりに同じ起こっているのですか?提案してください ! – HarsH1610

1

チェックアウト:私にとってhttp://jsfiddle.net/5Wfqr/3/

トラブルの唯一の源である:あなたのHTML内 "result_tbl":

var content_vlue = document.getElementById("result_tbl").innerHTML; 

あなたはIDを持つ要素を持っていますか?

+0

はい私はそれを持って、このサンプルコードから参照を削除することを忘れてしまったが、私はこれを削除しても動作しません。 – HarsH1610

+0

Firefoxにはうまくいきましたが、Google Chromeのブラウザではうまく動作してくれてありがとうございました。 – HarsH1610

0

このコードは私

<body> 
     <script type="text/javascript"> 
      function printPage() { 

       var docprint = window.open("about:blank", "_blank"`enter code here`, "channelmode");  
       var oTable = document.getElementById("tbl"); 
       docprint.document.open(); 
       docprint.document.write('<html><head><title>your title</title>'); 
       docprint.document.write('</head><body><center>'); 
       docprint.document.write(oTable.innerHTML); 
       docprint.document.write('</center></body></html>'); 
       docprint.document.close(); 
       docprint.print(); 
       docprint.close(); 
      } 
     </script> 
     <table id="tbl"> 
      <tr> 
       <td> content1 </td> 
       <td> content2 </td> 
      </tr> 
     </table> 
     <input type="button" value ="print" id="printButton" onclick="javascript:printPage()"/> 
    </body>