PhantomJS-Rendering无法显示所有图片[英] PhantomJS - Rendering fails to show all images

问题描述

我有一个 phantomjs 脚本,它正在逐步浏览我网站的页面.

对于每个页面,我使用 page = new WebPage(),然后在完成页面后使用 page.close().(这是对过程的简化描述,我使用的是 PhantomJS 版本 1.9.7.)

在每一页上,我都使用 page.renderBase64('PNG') 一次或多次,并将结果添加到数组中.

完成后,我构建一个新页面并循环浏览图像数组,使用 <img src="data:image/png;base64,.......image.data......."> 将每个图像添加到页面中.

完成后,我使用 page.render(...) 制作 PDF 文件.

这一切都很好......除了图像在大约第 20 张图像之后停止出现在 PDF 中 - 其余的只是显示为 4x4 像素黑点

为了解决这个问题...

  • 我已将 render 更改为输出 PNG 文件,并且具有相同的第 19 或第 20 图像之后的问题.
  • 我已经输出了原始 HTML.一世可以在 Chrome 中打开它,并且所有图像都可见.

任何想法为什么渲染会失败?

推荐答案

解决了这个问题.结果表明,当执行 render 时,PhantomJS 仍在准备图像.如下图所示,将 render 移动到 onLoadFinished 处理程序中,解决了该问题.之前,page.render 是在 page.content = 赋值之后立即调用的.

对于那些有兴趣做类似事情的人,这里是我们正在做的过程的要点:

var htmlForAllPages = [];

然后,当我们在 PhantomJS 中加载每个页面时:

var img = page.renderBase64('PNG');
...
htmlForAllPages.push('<img src="data:image/png;base64,' + img + '">');
...

完成后,最终的 PDF 就创建好了……我们已经准备好一个模板文件,其中包含所有必需的 HTML 和 CSS 等,只需将我们生成的 HTML 插入其中:

var fs = require('fs');
var template = fs.read('DocumentationTemplate.html');
var finalHtml = template.replace('INSERTBODYHERE', htmlForAllPages.join('\n'));

var pdfPage = new WebPage();
pdfPage.onLoadFinished = function() {
    pdfPage.render('Final.pdf');
    pdfPage.close();
};
pdfPage.content = finalHtml;

本文地址:https://www.itbaoku.cn/post/1740085.html