【发布时间】：2014-11-01 23:54:12
【问题描述】：
我遇到了一个问题，即渲染 PDF 的字体大小在生产中较大。在开发中生成的 PDF 上，一切看起来都很棒。
这是开发的渲染图：
这是来自生产的渲染：
这让我很难为开发中的生产服务器格式化我的文档。可以看看吗？
HTML 版本：http://www.hearingtracker.com/tickets/170
PDF下载：http://www.hearingtracker.com/tickets/170.pdf
这是我的控制器操作：
def show
@ticket = Ticket.find(params[:id])
respond_to do |format|
format.html { render :layout => false }
format.pdf do
render :pdf => "HearingTrackerTicket",
:layout => false,
:dpi => '300'
end
end
end
这里是pdf.css.scss
.pdf-body {
background-color: white;
p {
font-size: 12pt;
line-height: 20.5pt;
.underline {
border-bottom: 1pt solid;
}
}
h1 {
margin-top: 0;
font-size: 24pt;
}
h3 {
font-size: 14.25pt;
}
.code {
position: absolute;
top: 23pt;
right: 20pt;
}
.header {
border-bottom: 1pt solid;
}
.content {
.line {
height:30pt;
border-bottom: 1pt solid;
display:block;
}
ul {
list-style-type: none;
height:112pt;
li {
font-size: 12pt;
display: block;
float: left;
height: 22.5pt;
line-height: 17pt;
list-style: none;
margin-right: 20pt;
width:100%;
div {
display: block;
float: left;
border:1pt solid;
width: 15pt;
height: 15pt;
margin-right: 10pt;
}
}
}
ul.horizontal {
height:30pt;
li {
width:auto;
}
}
ul.horizontal-fixed {
height:30pt;
li {
width:250pt;
}
}
}
}
这是 HTML 输出（与 PDF 相同的来源生成）：
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<style type='text/css'>.pdf-body{background-color:white}.pdf-body h1{margin-top:0;font-size:24pt}.pdf-body h3{font-size:14.25pt}.pdf-body .code{position:absolute;top:23pt;right:20pt}.pdf-body p{font-size:12pt;line-height:20.5pt}.pdf-body p .underline{border-bottom:1pt solid}.pdf-body .header{border-bottom:1pt solid}.pdf-body .content .line{height:30pt;border-bottom:1pt solid;display:block}.pdf-body .content ul{list-style-type:none;height:112pt}.pdf-body .content ul li{font-size:12pt;display:block;float:left;height:22.5pt;line-height:17pt;list-style:none;margin-right:20pt;width:100%}.pdf-body .content ul li div{display:block;float:left;border:1pt solid;width:15pt;height:15pt;margin-right:10pt}.pdf-body .content ul.horizontal{list-style-type:none;height:30pt}.pdf-body .content ul.horizontal li{display:block;float:left;list-style:none;margin-right:20pt;width:auto}.pdf-body .content ul.horizontal li div{display:block;float:left;border:1pt solid;margin-right:10pt}.pdf-body .content ul.horizontal-fixed{list-style-type:none;height:30pt}.pdf-body .content ul.horizontal-fixed li{display:block;float:left;list-style:none;margin-right:20pt;width:250pt}.pdf-body .content ul.horizontal-fixed li div{display:block;float:left;border:1pt solid;margin-right:10pt}
</style>
</head>
<body class="pdf-body">
<div class="header">
<h1>Hearing Tracker Survey</h1>
<span class="code">Code: <strong>a9e78</strong></span>
<p style="border-bottom:1px solid; padding-bottom:17px;">
Thank you for taking the time to review your hearing aid(s) and hearing provider. Your responses will be made available to your hearing provider and to the public (anonymously). <strong>It is important that you answer these questions as honestly as possible.</strong> Your answers will help your provider to improve their practice and help provide valuable feedback to hearing aid manufacturers. For more information please visit <strong>hearingtracker.com</strong>
</p>
<p>
<i>Please complete the included surveys and return to: </i>
</p>
<p>
<strong>Hearing Tracker, Inc <br />
PO Box 40702 <br />
Austin, TX 78704</strong>
</p>
</div>
<div class="content">
<h3 class="section-header">
Hearing Aid Outcome Survey
</h3>
<p style="margin-top:-10px;">
<i>Place a check mark in <span class="underline">one box</span> per question.</i>
</p>
<div class="question">
<p>
1) How much does your hearing aid help you to hear speech in quiet environments?
</p>
<ul>
<li><div></div>Vast improvement with the hearing aid(s)</li>
<li><div></div>Good improvement with the hearing aid(s)</li>
<li><div></div>Slight improvement with the hearing aid(s)</li>
<li><div></div>No improvement with the hearing aid(s)</li>
<li><div></div>I heard better without the hearing aid(s)</li>
</ul>
</div>
<div class="question">
<p>
2) How much does your hearing aid help you to hear speech in noisy situations (restaurants, crowds, etc)?
</p>
<ul>
<li><div></div>Vast improvement with the hearing aid(s)</li>
<li><div></div>Good improvement with the hearing aid(s)</li>
<li><div></div>Slight improvement with the hearing aid(s)</li>
<li><div></div>No improvement with the hearing aid(s)</li>
<li><div></div>I heard better without the hearing aid(s)</li>
</ul>
</div>
<div class="question">
<p>
3) How much does your hearing aid help you to hear speech on the phone?
</p>
<ul>
<li><div></div>Vast improvement with the hearing aid(s)</li>
<li><div></div>Good improvement with the hearing aid(s)</li>
<li><div></div>Slight improvement with the hearing aid(s)</li>
<li><div></div>No improvement with the hearing aid(s)</li>
<li><div></div>I heard better without the hearing aid(s)</li>
</ul>
</div>
<div class="question">
<p>
4) How clear and natural does the hearing aid sound?
</p>
<ul>
<li><div></div>Very clear and natural</li>
<li><div></div>Somewhat clear and natural</li>
<li><div></div>Clear or natural, but not both</li>
<li><div></div>Neither clear nor natural</li>
<li><div></div>The sound is unbearable</li>
</ul>
</div>
<div class="question">
<p>
5) How much does your hearing aid improve your hearing for music?
</p>
<ul>
<li><div></div>Vast improvement with the hearing aid(s)</li>
<li><div></div>Good improvement with the hearing aid(s)</li>
<li><div></div>Slight improvement with the hearing aid(s)</li>
<li><div></div>No improvement with the hearing aid(s)</li>
<li><div></div>I heard better without the hearing aid(s)</li>
</ul>
</div>
<div class="question">
<p>
6) How comfortable is the hearing aid?
</p>
<ul>
<li><div></div>I don't even notice the hearing aid in my ear</li>
<li><div></div>I can feel the hearing aid in my ear, but it's very comfortable</li>
<li><div></div>The hearing aid is slightly uncomfortable after a few hours</li>
<li><div></div>The hearing aid is not comfortable, but I can tolerate it</li>
<li><div></div>The hearing aid hurts my ear</li>
</ul>
</div>
<div class="question">
<p>
7) How reliable is the hearing aid?
</p>
<ul>
<li><div></div>I've had no problems, and expect none in the future</li>
<li><div></div>I've had no problems, but anticipate there might be some in the future</li>
<li><div></div>I've had some issues, but nothing I couldn't take care of myself</li>
<li><div></div>I've had some issues with my hearing aid, but my provider has taken care of it in the clinic</li>
<li><div></div>My hearing aid has been sent offsite for repair by my audiologist</li>
</ul>
</div>
<div class="question">
<p>
8) Does the hearing aid do a good job of stopping unwanted feedback (buzzing and whistling)?
</p>
<ul>
<li><div></div>I never hear feedback from my hearing aid</li>
<li><div></div>My hearing aid creates feedback very rarely</li>
<li><div></div>My hearing aid creates feedback occasionally</li>
<li><div></div>My hearing aid creates feedback often</li>
<li><div></div>My hearing aid creates feedback frequently</li>
</ul>
</div>
<div class="question">
<p>
9) How much does the hearing aid improve your hearing?
</p>
<ul class="horizontal-fixed">
<li><div></div>Vast improvement with the hearing aid(s)</li>
<li><div></div>Good improvement with the hearing aid(s)</li>
<li><div></div>Slight improvement with the hearing aid(s)</li>
<li><div></div>No improvement with the hearing aid(s)</li>
<li><div></div>The hearing aid hurts my ear</li>
</ul>
</div>
<div class="question">
<p style = "clear: both; padding-top: 20px;">
10) How would you rate the value of your hearing aid?
</p>
<ul class="horizontal">
<li><div></div>Excellent value</li>
<li><div></div>Great value</li>
<li><div></div>Good value</li>
<li><div></div>Fair value</li>
<li><div></div>Poor value</li>
</ul>
</div>
<div class="written">
<p>
What would you tell others about your experience with your hearing aid(s)? Please DO NOT review your provider here.
</p>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<p>
More to say? Please continue on the back of this page, or on a separate sheet of paper.
</p>
</div>
<h3 class="section-header">
Provider Survey
</h3>
<div class="question">
<p>
The location was easy to access, pleasant, and professional
</p>
<ul class="horizontal">
<li><div></div>Strongly Agree</li>
<li><div></div>Agree</li>
<li><div></div>Neutral</li>
<li><div></div>Disagree</li>
<li><div></div>Strongly Disagree</li>
</ul>
</div>
<div class="question">
<p>
I was seen in a reasonable amount of time
</p>
<ul class="horizontal">
<li><div></div>Strongly Agree</li>
<li><div></div>Agree</li>
<li><div></div>Neutral</li>
<li><div></div>Disagree</li>
<li><div></div>Strongly Disagree</li>
</ul>
</div>
<div class="question">
<p>
My provider listened to me
</p>
<ul class="horizontal">
<li><div></div>Strongly Agree</li>
<li><div></div>Agree</li>
<li><div></div>Neutral</li>
<li><div></div>Disagree</li>
<li><div></div>Strongly Disagree</li>
</ul>
</div>
<div class="question">
<p>
My provider was knowledgable
</p>
<ul class="horizontal">
<li><div></div>Strongly Agree</li>
<li><div></div>Agree</li>
<li><div></div>Neutral</li>
<li><div></div>Disagree</li>
<li><div></div>Strongly Disagree</li>
</ul>
</div>
<div class="question">
<p>
My provider adequately explained procedures and results
</p>
<ul class="horizontal">
<li><div></div>Strongly Agree</li>
<li><div></div>Agree</li>
<li><div></div>Neutral</li>
<li><div></div>Disagree</li>
<li><div></div>Strongly Disagree</li>
</ul>
</div>
<div class="question">
<p>
My provider solved or offered solutions for my hearing needs
</p>
<ul class="horizontal">
<li><div></div>Strongly Agree</li>
<li><div></div>Agree</li>
<li><div></div>Neutral</li>
<li><div></div>Disagree</li>
<li><div></div>Strongly Disagree</li>
</ul>
</div>
<div class="question">
<p>
I am satisfied with the overall experience
</p>
<ul>
<li><div></div>Strongly Agree</li>
<li><div></div>Agree</li>
<li><div></div>Neutral</li>
<li><div></div>Disagree</li>
<li><div></div>Strongly Disagree</li>
</ul>
</div>
<div class="question">
<p>
I would recommend my provider to a family member or friend
</p>
<ul class="horizontal">
<li><div></div>Strongly Agree</li>
<li><div></div>Agree</li>
<li><div></div>Neutral</li>
<li><div></div>Disagree</li>
<li><div></div>Strongly Disagree</li>
</ul>
</div>
<div class="written">
<p>
Please provide a short review of your hearing professional.
</p>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<p>
More to say? Please continue on the back of this page, or on a separate sheet of paper.
</p>
</div>
</div>
</body>
</html>
【问题讨论】：
-
你检查过css渲染是否正确吗？
-
它似乎工作得很好......你可以看到我使用border-bottom创建的线条来创建用于书写的线条......以及使用CSS创建的复选框
-
顺便说一下，根据开发人员的建议，我使用“pt”而不是“px”来调整字体大小..
-
有人有线索吗？
-
顺便说一句，我尝试将固定的 page_height 和 page_width 添加到渲染块。仍然无法正常工作.. 呃！
标签： ruby-on-rails pdf wkhtmltopdf wicked-pdf