- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我遇到了一个问题,即呈现的 PDF 的字体大小在生产中较大。在开发中生成的 PDF 上,一切看起来都很棒。
这是开发的效果图:
这是来自生产的渲染:
这让我很难为开发中的生产服务器格式化我的文档。你能看看吗?
HTML 版本:http://www.hearingtracker.com/tickets/170
PDF下载:http://www.hearingtracker.com/tickets/170.pdf
这是我的 Controller Action :
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>
最佳答案
wkhtmltopdf
可以(并且将会)使用系统字体通过其 headless wekbkit 浏览器呈现内容。
所以你的问题实际上是开发和生产环境不同的问题。
如果你对你的服务器有一些控制,你可以尝试安装 freetype
和 fontconfig
包来在你的服务器上获得额外的字体,或者在你的样式表中提供你的字体作为像这样的 OTF 文件:
# in application.css.erb
@font-face {
font-family: 'OpenSansRegular';
src: url('<%= font_url('OpenSans.otf') %>');
font-weight: normal;
font-style: normal;
}
并告诉样式表使用它:
body {
font-family: 'OpenSansRegular';
font-size: 13px;
}
如果您没有 OTF 中的字体,here's a service to convert them .
关于ruby-on-rails - wicked_pdf 字体大小在生产中太大,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26694543/
这是我使用 Wicked_pdf 转换我的 html.erb 时的结果页到pdf . 问题 : 好像table的 tr被分成两页。 我试过没有成功 : 使用 page-break-inside如所述
我在用 Windows 7 Rails 3.2.11 wkhtmltopdf 0.9.9 在 gem 文件中 gem 'wicked_pdf' 在我的初始化程序中 WickedPdf.config
我一直在使用 Wicked PDF gem用于生成 pdf。它一直运行良好。 但是,我遇到了这样一种情况,即需要在第一页上附加并显示一个大页脚,而不是其余页面。为此,我按照建议在 pdf 正文底部添加
我正在尝试安装 wicked_pdf,以便在我的 Rails 应用程序上生成 2 个用户之间的预填充契约(Contract)。 我觉得我已经正确安装了 wicked_pdf,但我收到“ActionCo
我遇到了一个问题,即呈现的 PDF 的字体大小在生产中较大。在开发中生成的 PDF 上,一切看起来都很棒。 这是开发的效果图: 这是来自生产的渲染: 这让我很难为开发中的生产服务器格式化我的文档。你能
我正在尝试使用生成 PDF WIckedPdf 版本 = 1.1.0 wkhtmltopdf 0.12.4(带有补丁的 qt) Rails 4.2 下面是我的 Controller 端点 @cover
如何让产品的图像以 pdf 格式显示? 我在 View 文件中有此代码 它显示了这辆车的所有图像。 但是如果我在 show.pdf.erb 中使用相同的代码,那么我只
我对 wicked_pdf 页脚渲染没有什么问题。 这是我的渲染方法: def invoice render pdf: "#{@order.number}.pdf", f
我阅读了一些答案,但没有解决我的问题。 Html 图表效果很好,但当我使用 wicked_pdf 导出为 PDF 时,图表不显示。 我设置图表选项: plotOptions: { ser
我能够使用描述的技术 here在我想要的某些点获得分页符。但是,我有如下两列布局: " /> Location
我正在使用 wicked_pdf 和 wkhtmltopdf 在我的 Rails 应用程序中生成 pdf。我已经使用以下样式规则设置了我的页面(除了 Bootstrap 提供的样式之外)...
我有一个场景,我需要根据对象数组生成多页 pdf。 以下是我的模型: # Member has_many certificates class Member < ActiveRecord::Base
我正在使用 wicked_pdf 呈现 PDF。该应用程序以 HTML 格式呈现表格。该表是动态的,因为其中的数据每 30 秒更改一次。当用户单击“下载为 PDF”链接时,请求返回到服务器并呈现 HT
我有一个 Rails 应用程序,我在其中使用 wicked_pdf 生成 PDF。这一切都很好并且在本地工作,但是当推送到 heroku 时,PDF 确实呈现,但没有应用样式表。 特别是对于 PDF
render :pdf => "file_name", :layout => 'pdf.html.erb',
环境:- ruby - 1.9.3, rails - 4.0.0 我正在使用 wicked_pdf gem 生成 pdf。 为此,我在 Controller 中使用了以下代码:- respond_to
我在我的 rails 项目中使用 chart.js 和 activeadmin 我在我的行动中有这个 controller do before_action :set_query, only: :
我有一个这样的 Controller : def show @professor = Professor.find(params[:id]) respond_to do |format
我正在尝试使用 Wicked_pdf gem 和 Highcharts 生成 PDF 报告。 我已经尝试设置 animation , enableMouseTracking和 shadow错误的。 但
我正在使用 wicked_pdf 并且遇到了问题。 css 不起作用。如何正确使用? 我的代码是这样的: application.html.erb WickedPdfExample
我是一名优秀的程序员,十分优秀!