Question

我正在尝试使用rasterize.js示例将简单的html页面呈现为pdf文件。 html页面引用了外部样式表。页面在浏览器中正确显示，但渲染的pdf在某种程度上没有应用样式。

Html阻止：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen"/>
</head>
<body>
<div class="content" id="parent">
<div class="card">
<h3> TEST STEP 0</h3>
<p>Action : OpenPage Object :  Data : http://newtours.demoaut.com/</p>
<div class="banner" id="banner0">
<img src="css/pass-icon.png" /></div>
<hr>
<div class="card-image" id="image0">
<img src="Snapshots/null_1420981153527.png" />
</div>
</div>
<div class="footer">
            All contents copyright 2014. 
        </div>
    </body>
</html>

styles.css的：

body {
    font-family: Calibri, Helvetica;   
    background:#E0E0E0;
    padding:0px;
    margin:0px;
    color:#333;
    min-height:100%;
}

.header {
    text-align:center;
    position:fixed;
    height:30px;
    left:0px;
    right:0px;
    background:#FFF;
    padding:25px 0px 5px 0px;
    border-bottom:5px solid #CCC;
    font-size:20px;
    font-weight:bold;
}

.content {  
    position:fixed;
    top:62px;
    bottom:0px;
    left:0px;
    right:0px;
    overflow:scroll;
    -webkit-overflow-scrolling:touch;
    margin-bottom:30px;
    margin-left:300px;

}

.footer {
    position:fixed;
    height:22px;
    left:0px;
    right:0px;
    bottom:0px;
    background:#FFF;
    color:888;
    text-align:center;
    padding:5px 0px 0px 0px;
    border-top:5px solid #CCC;
    font-size:12px;
}

.float-left .card {
    float:left;
    width:300px;  
    height:270px;
}

.multi-column {
    columns:300px 3;
    -webkit-columns:300px 3;
}

.card {
    background:#FFF;
    border-bottom:3px solid #BBB;
    padding:0px;
    margin:15px;
    overflow:hidden;
    position:relative;
}

.card h2 {
    margin:0px;
    padding:10px;
    padding-bottom:0px;
}

.card h3 {
    margin:0px;
    padding:10px;
    padding-bottom:0px;
}

.card p {
    margin:10px;
    font-family:'helvetica', 'arial', 'sans-serif';
    font-size:12px;
    padding:2px;
    display: inline-block;
    background:#339933;
    color:#FFF;
}

.test{
    font-family:'helvetica', 'arial', 'sans-serif';
    background:#339933;
    color:#FFF;
    font-size:12px;
    display: inline-block;
    padding:3px;
    float:right;
}

.card-image {
    width:400px;
    height:300px;
    padding:0px;
    margin:20px;
    border:1px solid #ccc;
    background-position:center;
    background-repeat:no-repeat;
    position:relative;
    overflow:hidden;
    background-image:url('ajax-loader.gif');
}

.card-details {
    width:400px;
    height:300px;
    padding:0px;
    margin:20px;
    float:right;
    background-position:center;
    background-repeat:no-repeat;
    overflow:hidden;
}

.card-image img {
    width:100%;
}

.banner {
    height:50px;
    width:50px;
    top:0;
    right:0;
    margin:30px;
    position:absolute;
    background-repeat:no-repeat;
}

.card-image h1, 
.card-image h2, 
.card-image h3, 
.card-image h4, 
.card-image h5, 
.card-image h6 {
    position:absolute;
    bottom:0px;
    width:100%;
    color:white;
    background:rgba(0,0,0,0.65);
    margin:0px;
    padding:6px;
    border:none;
}

.rightColumn,
.leftColumn {
    display:inline-block;
    width:49%;
    vertical-align:top;
}

.column {
    display:inline-block;
    vertical-align:top;
}

.image1 {
    background-image:url('ajax-loader.gif');
}

.image2 {
    background-image:url('ajax-loader.gif');
}

呈现pdf：

enter image description here

浏览器中的Html页面：

enter image description here

编辑：尝试渲染到png确实应用了css

enter image description here

Answer 1

尝试在所有css语句的末尾添加!important;标记。如果不起作用，请使用-webkit-text-fill-color:代替color:作为css语句，类似于背景

phantomjs rasterize.js在渲染为pdf时不应用外部CSS的样式

1 个答案: