ページの一部をポートレート形式で印刷したい

Question

このprintareaプラグインが見つかりました。http://plugins.jquery.com/project/PrintAreaを参照してください。

私は自分のHTMLに、印刷したいページの部分を持っています。 そして私は下のスクリプトを入れました。しかし、私がページを印刷するときには、protrait形式ではなく横長形式で表示されます。どうすれば修正できますか？ また、この要素によって不要なページ改行が発生しますが、どうすれば修正できますか？ これを行うにはより良い方法がありますか？

<script type="text/javascript" src="<%=Url.Content("~/Scripts/jquery.Printarea.js")%>"></script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#btnPrintOnePage").click(function() { 
      // Print the DIV. 
      $(".printable").printArea(); 
      // Cancel click event. 
      return (false); 
     } 
     ) 
     ; 
    }); 
</script> 

Answer 1

ありがとうございます。 私がやっていることに対する解決策を見つけましたが、これが起こるたびに解決策があるとは確信できません。 次のコードを入力します。 printElementプラグイン（http://projects.erikzaadi.com/jQueryPlugins/jQuery.printElement/）で

<script type="text/javascript"> 
     $(document).ready(function() { 
      $("#btnPrintOnePage").click(function() { 
       // Print the DIV. 
       $(".printable").printElement({ 
        printMode: 'popup', 
        overrideElementCSS: ['<%=Url.Content("~/Content/print.css")%>'] 
       }); 
      }); 
     }); 
</script> 

私は、スタイルシートを交換することができたと私は、出力されたものを超えるはるかにコントロールしていました。水平に印刷する

Answer 2

ウェブサイトの印刷方法はほとんどありません。ランドスケープで印刷するかポートレートで印刷するかは、ブラウザの印刷設定によって決まります。

特定の要素によって、不要な改ページが発生することがあります。これらの要素は、通常は浮動しているか、オーバーフローが設定されているか、非常に広いです。 print cssを使用してこれらの値を削除またはリセットする必要があります。印刷の最適化に関する豊富な情報があります。一つの例は次のとおりです。http://www.webdesignerdepot.com/2010/01/10-tips-for-better-print-style-sheets/

• TJ

Answer 3

いくつかのオプションがあります。マイルは異なる場合があります。

1. 希望するとおりにPDFを生成して印刷します。あなたの印刷スタイルシートで

は、必要に応じて、コンテンツを回転させ、あなたの印刷スタイルシートで

3. ので@page {size:portrait;}または@page {size:8.5in 11in;}のように、肖像画にページを設定します。したがって.printable{-moz-transform:rotate(-90deg) // other rotate styles etc.}

Answer 4

、以下では、ヘッダーに追加する必要があります

var options = { mode : "popup", popClose : true, extraHead : '<meta charset="utf-8"/>,<meta http-equiv="X-UA-Compatible" content="IE=edge"/>,<style rel="stylesheet" type="text/css" media="print">@page { size: landscape; }</style>' }; 

$("#form1").printArea(options);