Question

我正在使用PhantomJS来截取我的页面但我遇到了一些问题。当从Firebase检索数据时，我的页面内容通过jQuery呈现90％。我正在使用phantomjs-node，因为我正在通过Nodejs构建我的网站。

我希望在Firebase的数据填充网页后截取屏幕截图，但它似乎不起作用。

我的nodejs文件：

var renderSendInvoice = function(req,res){

var id = req.query["id"]
var url = "http://localhost:5001/invoicePrint.html?id="+id;

phantom.create().then(function(ph) {
ph.createPage().then(function(page) {

  page.setting('javascriptEnabled',true);
  page.setting("userAgent", 'Mozilla/5.0 (X11; Linux x86_64; rv:49.0) Gecko/20100101 Firefox/49.0');

  page.property('viewportSize', {width: 794, height: 1122});
  page.property('onCallback',function(data) {
    console.log("called");
  });

  page.on('onLoadFinished', true, function (requestData, 
networkRequest) {
      console.log("load finish already");

  });

    page.open(url).then(function(){

        console.log("open page");
        page.render("test.pdf", function(err){
        ph.exit()
      });

    });
  });
 });
};

我的Html文件：

<!DOCTYPE html>
<html lang="en">


 <body class="nav-md">
<div class="container body">
    <div class="main_container">



        <!-- page content -->
        <div class="col-md-12 col-sm-12 col-xs-12" role="main">
            <div class="">


                <div class="clearfix"></div>

                <div class="row">
                    <div class="col-md-12">
                        <div class="x_panel">

                            <div class="x_content">

                                <section id="invoice" class="content invoice">
                                    <!-- title row -->
                                    <div class="row">
                                        <div class="col-xs-12 invoice-header">

                                            <!-- Logo Image -->
                                            <img src="/assets/logo.png">

                                            <!-- Right Address -->
                                            <div class="invoice-info pull-right" align="right">
                                                <h3 id="invoiceTitle">
                                                    <b></b>
                                                </h3>
                                                <p id="ourContent"></p>

                                            </div>
                                            <!-- End of Right Address -->

                                        </div>
                                        <!-- /.col -->


                                    </div>
                                    <hr>
                                    <!-- info row -->
                                    <div class="row invoice-info">
                                        <div class="col-sm-4 invoice-col">

                                            <!-- Customer Address -->
                                            <address id="address"></address>
                                            <!-- End of Customer Address -->

                                        </div>

                                        <div id="invoice-right" class="invoice-info pull-right" align="right">
                                        </div>

                                    </div>
                                    <!-- /.row -->

                                    <!-- Table row -->
                                    <div class="row">
                                        <div id="order" class="col-xs-12 table">

                                        </div>
                                        <!-- /.col -->
                                    </div>
                                    <!-- /.row -->

                                    <div class="row">
                                        <!-- accepted payments column -->
                                        <div class="col-xs-6">
                                            <p class="lead">Payment Methods:</p>

                                            <p class="text-muted well well-sm no-shadow" style="margin-top: 10px;">
                                                We accept payments in the form of bank transfer or cheque payment. Please kindly pay the amount by the due date stated on the invoice.
                                            </p>
                                        </div>
                                        <!-- /.col -->
                                        <div class="col-xs-6">

                                            <div class="table-responsive">
                                                <table class="table">
                                                    <tbody align="center">
                                                        <tr>
                                                            <th style="width:50%">Subtotal:</th>
                                                            <td id="gross"></td>
                                                        </tr>
                                                        <tr>
                                                            <th>Tax (0%)</th>
                                                            <td id="tax"></td>
                                                        </tr>
                                                        <tr>
                                                            <th>Shipping:</th>
                                                            <td id="shipping"></td>
                                                        </tr>
                                                        <tr>
                                                            <th>Total:</th>
                                                            <td id="net"></td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                        <!-- /.col -->
                                    </div>
                                    <!-- /.row -->

                                </section>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /page content -->

    </div>
</div>


<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/4.1.2/firebase.js">
</script>



<!-- Fetch Templates -->
<script>

$(document).ready(function() {

  var content = "TreeDots Enterprise<br>" +
  "Bishan Street 12<br>" +
  "Block 122 #09-47, 570122<br><br>" +

  "+65 9017 3814<br>" +
  "hello@thetreedots.com<br>" +
  "Reg No: 201724120K<br>"

  $("#ourContent").append(content);

  var url_string = window.location.href;
  var url = new URL(url_string);
  let invoiceId = url.searchParams.get("id");

  return firebase.database().ref('/Private/Invoice/'+invoiceId).once('value').then(function(snapshot) {

  let snap = snapshot.val();
  var deliveryStatus = snap.status

    if(deliveryStatus == "Pending"){
      $("#invoiceTitle").text("DRAFTED INVOICE");
    } else {
      $("#invoiceTitle").text("INVOICE");
    }

    let addressData = "<strong>"+snap.cName+"</strong><br>"+
    "<br>"+snap.cContactName+""+
    "<br>"+snap.cEmail+""+
    "<br>+65 "+snap.cPhone+""+
    "<br>"+
    "<br>"+snap.cAddress+""+
    "<br>Singapore "+snap.cPostal+""

    $("#address").append(addressData);

    $("#gross").text("S$ "+snap.grossTotal.toFixed(2));
    $("#tax").text("S$ "+snap.tax.toFixed(2));
    $("#shipping").text("S$ "+snap.shipping.toFixed(2));
    $("#net").text("S$ "+snap.netTotal.toFixed(2));


    let invoiceRightData = "Invoice Number: "+invoiceId+"<br>" +
    "Date Issued: "+snap.orderDate+"<br>" +
    "Payment Due: "+snap.dueDate+"<br><br>"
    "<h1><small>amount due</small><br>S$ "+snap.netTotal.toFixed(2)+"
    </h1>"

    $("#invoice-right").append(invoiceRightData);

    $.each(snap.order,function(key,orderSnap){

    var deliveryInfo = null

    if (deliveryStatus == "Pending"){
      deliveryInfo = ""
    } else {
      deliveryInfo = "Delivering on "+orderSnap.delivery
    }

    var data =  "<div class='x_title'>" +
        "<h2>"+orderSnap.name  + "</h2><br><br>" + deliveryInfo +
        "<div class='clearfix'></div>" +
        "</div>" +
        "<table class='table table-striped'>"+
        "<thead>"+
          "<tr>"+
            "<th>Quantity</th>" +
            "<th>Product</th>" +
            "<th>Unit Price</th>" +
            "<th>Subtotal</th>" +
          "</tr>" +
        "</thead>" +
        "<tbody>"

        $.each(orderSnap.products, function(name,details){

        var product = "<tr>" +
                "<td>"+details.orderQty+"</td>" +
                "<td>"+details.name+"</td>"+
                "<td>S$ "+parseFloat(details.unitPrice).toFixed(2)+"
                </td>"+

                "<td>S$ "+parseFloat(details.totalPrice).toFixed(2)+"
                 </td>"+
              "</tr>"

        data = data + product
        })

        var ending = "</tbody>" +
                    "</table>"

        data = data + ending

      $("#order").append(data);

      loadFinished();

    });


  });
});
</script>
<!-- !Fetch Templates -->

<script>
function loadFinished(){
  window.callPhantom({hello:'world'});
}

</script>



</body>

</html>

我的HTML网页有效，因为如果我在没有PhantomJS的情况下单独加载它，所有内容都会完美加载。但是，如果我使用phantomjs并渲染页面，那么在加载jQuery脚本之前，我得到的只是HTML的静态内容。只打印HTML正文中的那些，但不打印整个站点。见图：

我试过延迟10000毫秒，但我仍然得到相同的截图。

我得出的结论是，jQuery根本没有在phantomjs中加载，但我不确定如何对其进行故障排除（以确认jQuery未加载）。

我尝试使用onCallback并在我的html中包含window.callPhantom()，但它也从未被回调过。

Phantom.js没有在$（document）.ready中加载内容

0 个答案: