如何使用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直接添加到页眉或页脚。