Question

我在Node服务器上运行Phantom，以便从数据生成页面，然后将其呈现为pdf。

然而，当页面工作并正确呈现为pdf和所有内容时，我无法让它们考虑外部CSS文件。

以下是我要做的简化版本：

var phantom = require ('phantom');

phantom.create(function (ph) {
  ph.createPage(function (page) {
      var content = "";
      content += '<html><head>';
      content += '<link rel="stylesheet" href="/temp.css">'; 
      content += '<link rel="stylesheet" href="./temp.css">';
      content += '<link rel="stylesheet" href="temp.css">';
      content += '</head><body>';
      content += '<div class="myClass">I am supposed to be blue</div>';
      content += '</body></html>';
      page.set('content', content);

      setTimeout(function(){ 
          page.render("MyRenderedPDF.pdf", {format: 'pdf', quality: '100'}); 
      }, 1000)});
  }, {dnodeOpts: {weak: false}});

（我把三个CSS引用放在一边，因为基本的相对路径语法问题，我没有错过我的CSS）

CSS：

.myClass { color: blue; }

PDF将在我的服务器所在的文件夹中呈现。我的CSS位于同一个文件夹中。

所有内容都在PDF中正确显示 - 但文字不是蓝色。

我知道我可以强制将一个样式值放入div中，但我们使用的CSS非常广泛，我宁愿找到一种直接访问它们的方法。

关于我遗失的任何想法？

Answer 1

page.set('content', content);（或普通PhantomJS中的page.content = content）可以直接设置页面内容。当您这样做时，评估页面的域是“about：blank”。资源“about：blank / temp.css”根本就不存在。

我在这里看到两个用例。

可以从网站

访问资源

从

指定要加载资源的完整URL

content += '<link rel="stylesheet" href="http://example.com/path/temp.css">';
// OR
content += '<link rel="stylesheet" href="http://localhost/path/temp.css">';

或使用page.setContent(html, url)设置域名：

page.setContent(content, "http://localhost/path/", function(){
    page.render("MyRenderedPDF.pdf", {format: 'pdf', quality: '100'}, function(){
        ph.exit();
    }); 
});

不要忘记回调，因为幻像模块与普通的PhantomJS脚本不同。有关详细信息，请参阅Functional Details。

资源是没有Web服务器的本地文件

您必须使用fs模块来读取文件内容并将其作为嵌入式样式表。

content += '<style>' + fs.readFileSync("./temp.css") + '</style';

在PhantomJS页面上没有考虑外部CSS

1 个答案:

可以从网站

资源是没有Web服务器的本地文件