Meteor - phantomjs 渲染公共资产答案

【问题标题】：Meteor - phantomjs rendering of public assetsMeteor - phantomjs 渲染公共资产
【发布时间】：2017-01-12 06:56:56
【问题描述】：

我正在处理一个 Meteor 项目，我需要从页面生成一个部分的 PDF 导出。我使用 webshot 来生成导出。最近的一项要求是在导出中使用公共静态资产 - 徽标图像。我通过读取所有 css 文件并将其内容复制到 HTML 文档中的样式标签中让 webshot 使用，从而使 css 资产可用于 phantomjs。这很好用。对于图像，我将 HTML 中的“./images/”模式替换为服务器上图像文件夹的完整路径

const buildPath = path.resolve('.').split(path.sep + 'server')[0];
const imagePath = buildPath + '/web.browser/app/images/';

在服务器上运行。图像不显示。当我在我的开发机器上的任何地方打开生成的 HTML（我保存它以进行调试）时，图像路径被解析得很好，我得到了图像。

在 phantomjs 中访问这些静态资产的正确方法是什么？

【问题讨论】：

欢迎来到 Stack Overflow！ PhantomJS 与任何浏览器一样工作，但它有一些错误。您使用哪个 PhantomJS 版本？请注册onConsoleMessage、onError、onResourceError、onResourceTimeout 活动 (Example)。可能有错误。
您是否给了足够的时间来加载图像？您能否展示您的代码的最小工作示例？

标签： meteor phantomjs

【解决方案1】：

我想通了——我在 img 标签的 src 属性中缺少一个完全限定的协议。虽然 Chrome 聪明且宽容，但 phantomjs 却不是。所以基本上我必须在图像的完整路径之前添加'file:///'。现在看起来像：

const buildPath = path.resolve('.').split(path.sep + 'server')[0].replace(/\\/g, '/');
const imagePath = buildPath + '/web.browser/app/images/';
html = html.replace(/src="\.\/images\//g, 'src="file:///' + imagePath);

至于关于时间的评论，我确实延迟了整整 1 秒的渲染时间，但没有检查它是否可以正常工作。

【讨论】：