0

次のようなhtmlページがあります。

 <html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
   <title>charts</title>
   <link type="text/css" rel="stylesheet" media="screen" href="css/charts.css" />
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery   /1.9.1/jquery.min.js"></script>
   <script type="text/javascript" src="js/charts.js"></script>
   <script type="text/javascript">
    $(document).ready(function(){

      $("#thebutton").click(function(){
          //execute phantomjs to save div id example to pdf
      });     
    });
  </script>
  </head>
  <body>
    <div id="example">
        <div id="frame" class="graph2" style="position: relative; left: 0pt; top: 5pt; width: 500px; height: 415px;">
            <canvas id="myCanvas" height="415" width="500"></canvas>
            <div id="resultC10000" class="num" style="position: absolute; left: 120px; top: 195px;">4</div>
            <div id="resultC01000" class="num" style="position: absolute; left: 360px; top: 195px;">3</div>
            <div id="resultC00100" class="num num-empty" style="position: absolute; left: -1000px; top: -2200px;">0</div>
        </div>
    </div>
    <div><input type="button" id="thebutton" value="export"></div>
 </body>
 </html>

. 私はpngへのエクスポートモジュールを作成しますが、特にpdf（エクスポートを開始するためのボタンまたはリスト）へのエクスポートモジュールを作成します。そのために、プラグイン phantomjs と rasterize.js (Highcharts http://www.highcharts.com/component/content/article/2-news/52-serverside-generated-charts#phantom_usageなど) を使用することを考えていましたが、そうします私のWebページに直接統合して使用する方法がわかりません。また、メインの div にはキャンバスだけでなく、テキストを含む一連の div も含まれています。すべての div をキャンバスに変換してから、以前のプラグインを使用して pdf に変換する必要があると思います。

div を pdf に変換する手がかりを教えてもらえますか?

4

1 に答える 1

0

PNG に使用しているものとまったく同じツールを使用します: phantomjs.

var page = new WebPage();
page.paperSize = {
  format: "A4",
  orientation: "portrait",
  margin: {left:"2.5cm", right:"2.5cm", top:"1cm", bottom:"1cm"},
};
page.zoomFactor = 1;
// assume the file is local, so we don't handle status errors
page.open("http://your.url/here", function (status) {
   page.render("/path/to/your/pdf.pdf");
   phantom.exit();
});

はい、本当に簡単です。明らかに、render()標準phantom呼び出しの使用を制限できます。実際、印刷するには、次のものが必要です。

  • 用紙フォーマット/サイズの定義
  • .pdfに渡されるように終わるファイルrender()。
于 2013-05-26T19:00:03.433 に答える