我正在使用 PhantomJS 截屏我的页面，但遇到了一些问题。当从 Firebase 检索数据时，我的页面内容 90% 是通过 jQuery 呈现的。我正在使用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 毫秒，但我仍然得到相同的屏幕截图。
我得出的结论是，在 phantomjs 中根本没有加载 jQuery，但我不确定如何解决它（确认没有加载 jQuery）。
我曾尝试使用 onCallback 并将其包含window.callPhantom()在我的 html 中，但它也从未被回调。