Phantomjs不会使用自定义样式呈现页脚 [英] Phantomjs doesn't render footers with a custom styles

问题描述

我有下面的例子：

pre $ var page = require（'webpage'）。create（），
system = require（'system'）;

if（system.args.length< 3）{
console.log（'Usage：printheaderfooter.js URL filename'）;
phantom.exit（1）;
} else {
var address = system.args [1];
var output = system.args [2];
page.viewportSize = {width：600，height：600};
page.paperSize = {
格式：'A4'，
保证金：1cm
页脚：{
高度：1cm，
内容：phantom.callback（function（pageNum，numPages）{
if（pageNum == numPages）{
return;
}
return< h1 class ='footer_style '> Footer+ pageNum +/+ numPages +< / h1>;
}）
}
};
page.open（地址，函数（status）{
if（status！=='success'）{
console.log（'Unable to load the address！'）;
$ else {
window.setTimeout（function（）{
page.render（output）;
phantom.exit（）;
}，200）;
}
}）;





$ b在上面的示例中，我使用footer_style类，它在我的css文件中看起来像以下内容：



  .footer_style {
 text-align：right; 
} 
  

但不幸的是，我试图创建PDF文件，如下所示：

  ./ phantomjs rasterize.js index.html test.pdf 
  




解决方案

我们知道类不行，但内联样式可以。我们可以做的是用计算的样式替换类。



这是一个函数，它将采用一段html代码，使用html在body中创建一个临时元素，使用一个类为每个元素计算样式，添加计算风格内联并返回新的html。

 函数replaceClassWithStyle（html）{
 return page.evaluate（function（ html）{
 var host = document.createElement（'div'）; 
 host.innerHTML = html; 
 document.body.appendChild（host）; //如果不添加，值将会（元素[i] .className）{
元素[
元素[元素]）
 var元素=主机.getElementsByTagName（'*'）; 
 i] .setAttribute（'style'，window.getComputedStyle（elements [i]，null）.cssText）; 
} 
} 
 document.body.removeChild（host）; 
 return host.innerHTML; 
}，html）; 
} 
  

然后只需在脚注中调用该函数：



  page.paperSize = {
 footer：{
 contents：phantom.callback（function（pageNum，numPages）{
 if（pageNum == numPages）{
 return; 
} 
 return replaceClassWithStyle（< h1 class ='footer_style'> Footer+ pageNum +/+ numPages + < / h1>）; 
}）
} 
}; 
  

您需要将所有内容移到 page.open（） code>。

我测试了它，页脚与右边对齐。

I have the following example:

var page = require('webpage').create(),
    system = require('system');

if (system.args.length < 3) {
    console.log('Usage: printheaderfooter.js URL filename');
    phantom.exit(1);
} else {
    var address = system.args[1];
    var output = system.args[2];
    page.viewportSize = { width: 600, height: 600 };
    page.paperSize = {
        format: 'A4',
        margin: "1cm"
        footer: {
            height: "1cm",
            contents: phantom.callback(function(pageNum, numPages) {
                if (pageNum == numPages) {
                    return "";
                }
                return "<h1 class='footer_style'>Footer" + pageNum + " / " + numPages + "</h1>";
            })
        }
    };
    page.open(address, function (status) {
        if (status !== 'success') {
            console.log('Unable to load the address!');
        } else {                
            window.setTimeout(function () {
                page.render(output);
                phantom.exit();
            }, 200);
        }
    });
}

In the example above I use footer_style class that look likes in my css file the following:

.footer_style {
  text-align:right;
}

But unfortunately that dosen't works. I'm trying to create pdf file such as follows:

./phantomjs rasterize.js index.html test.pdf

解决方案

We know that classes do not work but inline styles do. What we can do is replace the class with the computed style.

Here is a function that will take a piece of html, create a temporary element in the body with the html, compute the style for each element with a class, add the computed style inline and return the new html.

function replaceClassWithStyle(html) {
    return page.evaluate(function(html) {
        var host = document.createElement('div');
        host.innerHTML = html;
        document.body.appendChild(host); // if not appended, values will be blank
        var elements = host.getElementsByTagName('*');
        for (var i in elements) {
            if (elements[i].className) {
                elements[i].setAttribute('style', window.getComputedStyle(elements[i], null).cssText);
            }
        }
        document.body.removeChild(host);
        return host.innerHTML;
    }, html);
}

Then simply call this function in your footer:

page.paperSize = {
    footer: {
        contents: phantom.callback(function(pageNum, numPages) {
            if (pageNum == numPages) {
                return "";
            }
            return replaceClassWithStyle("<h1 class='footer_style'>Footer" + pageNum + " / " + numPages + "</h1>");
        })
    }
};

You will need to move all this inside page.open().

I tested it and the footer is aligned to the right.

这篇关于Phantomjs不会使用自定义样式呈现页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！