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），但我这样做了不知道如何集成并直接使用到我的网页中。此外，我的主 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 回答