如何使用PhantomJS在生成的PDF中顯示已處理頁面的網址？

Question

我的目標是從使用Rails創建的網站的站點地圖中包含的每個頁面生成PDF。 我正在使用PhantomJS來獲取它。 我在這個領域還很陌生，但是我可以做到，但是當我完成后，我意識到在每個PDF的開頭也可以看到生成PDF的頁面的網址也是可以使用的，所以我可以更快地瀏覽到該頁面（該站點有數百個頁面）。

這是Javascript：

// Render Sitemap to file

var RenderUrlsToFile, arrayOfUrls, system;

system = require("system");

/*
Render given urls
@param array of URLs to render
@param callbackPerUrl Function called after finishing each URL, including the last URL
@param callbackFinal Function called after finishing everything
*/

var getFileNumber = function(urlIndex) {
  if (urlIndex <10) {
    return "00" + urlIndex;
  } else {
    if (urlIndex <100) {
      return "0" + urlIndex;
    } else {
      return urlIndex;
    }
  }
};

RenderUrlsToFile = function(urls, callbackPerUrl, callbackFinal) {
    var getFilename, next, page, retrieve, urlIndex, webpage;
    urlIndex = 0;
    webpage = require("webpage");
    page = null;
    getFilename = function() {
    return "rendermulti-" + getFileNumber(urlIndex) + ".pdf";
    };
    next = function(status, url, file) {
        page.close();
        callbackPerUrl(status, url, file);
        return retrieve();
    };
    retrieve = function() {
        var url;
        if (urls.length > 0) {
            url = urls.shift();
            urlIndex++;
            page = webpage.create();
            page.viewportSize = {
                width: 1920,
                height: 1880
            };
            page.settings.userAgent = "Phantom.js bot";
            return page.open(url, function(status) {
                var file;
                file = getFilename();
                if (status === "success") {
                    return window.setTimeout((function() {

                      // !!!!!!!!!!!!! Doesn't work !!!!!!!!!!!!!!!!!!!!!!!!!!!!!
                      page.evaluate(function() {
                        var x = document.getElementById("logoAndNavigation");
                        var newP = document.createElement("P")
                        var textnode = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname;
                        newP.appendChild(textnode)
                        x.insertBefore(newP, x.childNodes[0]);
                      });
                      // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
                      page.render("tempPdfs/" + file);
                      return next(status, url, file);
                    }), 200);
                } else {
                    return next(status, url, file);
                }
            });
        } else {
            return callbackFinal();
        }
    };
    return retrieve();
};

// This makes an array with all the urls inside the sitemap
var arrayOfUrls = [''];
var page = require('webpage').create();
page.open('http://localhost:3000/sitemap.xml', function() {
  var content = page.content;
  parser = new DOMParser();
  xmlDoc = parser.parseFromString(content,'text/xml');
  var loc = xmlDoc.getElementsByTagName('loc');
  for(var i=0; i < loc.length; i++)
  {
    var url=loc[i].textContent;
    arrayOfUrls.push(url);
  }
});




RenderUrlsToFile(arrayOfUrls, (function(status, url, file) {
    if (status !== "success") {
        return console.log("Unable to render '" + url + "'");
    } else {
        return console.log("Rendered '" + url + "' at '" + file + "'");
    }
}), function() {
    return phantom.exit();
});

我試圖用網址解決問題，並用注釋框住代碼

// !!!!!!!!!!!!! Doesn't work !!!!!!!!!!!!!!!!!!!!!!!!!!!!!

我想在頁面元素內部顯示url，ID為#logoAndNavigation，但出現此錯誤：

NOT_FOUND_ERR：DOM異常8：嘗試在不存在的上下文中引用節點。

如果我在變量textnode內僅使用“ hello”之類的字符串，則可以使用，但是如果我嘗試使用頁面的url，則無效。

誰能幫幫我嗎？ 先感謝您！

Answer 1

appendChild期望節點不是字符串。 您可能打算使用

var x = document.getElementById("logoAndNavigation");
var newP = document.createElement("p"); // small p
var textnode = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname;
newP.innerHTML = textnode; // this
x.insertBefore(newP, x.childNodes[0]);

您還可以使用printheaderfooter.js的示例將URL直接添加到頁眉或頁腳。