文章/答案/技术大牛

发布

社区首页 >问答首页 >phantomjs rasterize.js渲染为pdf时不应用来自外部css的样式

问phantomjs rasterize.js渲染为pdf时不应用来自外部css的样式
EN

Stack Overflow用户

提问于 2015-01-14 23:25:56

回答 1查看 1.9K关注 0票数 1

我试图呈现一个简单的html页面到pdf文件使用rasterize.js的例子。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：

浏览器中的Html页：

编辑:尝试渲染为png会应用css

javascript

css

phantomjs

回答 1

Stack Overflow用户

发布于 2015-02-11 06:07:51

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

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/27946453

复制

相似问题

问phantomjs rasterize.js渲染为pdf时不应用来自外部css的样式
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问phantomjs rasterize.js渲染为pdf时不应用来自外部css的样式EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问phantomjs rasterize.js渲染为pdf时不应用来自外部css的样式
EN