Question

我有一个像这样的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转换为canvas，然后使用之前的插件将其转换为pdf。

你能给我一些线索将div转换成pdf吗？

Answer 1

您将使用与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()。

使用canvas和多个div为div创建导出PDF模块

1 个答案: