0

我正在尝试从 HTML 模板生成 PDF，目的是填写整个页面，以便用户可以打印出来。但是，右侧和底部都有空白，我不知道如何让它填写整个 PDF。

HTML 模板：

<!doctype html>
<%
  date = nil
  begin
    date = Date.new(date_y.to_i, date_m.to_i, date_d.to_i)
  rescue ArgumentError
    raise StandardError, t('pdfs.digital_invitation.date_is_invalid')
  end

  location = Location.find(location_id)
  location_url = site_locations_root_url(location.slug, url_options)
%>
<html>
  <head>
    <meta charset='utf-8' />
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">
    <%= stylesheet_link_tag wicked_pdf_asset_base64("pdf") %>
  </head>
  <body id="template3" style="background-image: url('<%= wicked_pdf_asset_base64("pdf/template3-bg.png") %>');">
    <main>
      <h1 class="title"><%= t('pdfs.digital_invitation.title') %></h1>
      <p class="invite">
        <%= t('pdfs.digital_invitation.please') %> <%= l(date, format: :long) %> <%= t('pdfs.digital_invitation.for') %>
      </p>
      <div>
        <h2 class="name"><%= name_of_party %></h2>
        <p class="times">
          <span class="start-time"><%= t('pdfs.digital_invitation.start_time') %> <%= start_time %></span><span class="end-time"><%= t('pdfs.digital_invitation.end_time') %> <%= end_time %></span>
        </p>
      </div>
      <p class="location">
        <strong><%= "Sky Zone #{location.name}" %></strong><br>
        <%= address_for_display(location) %>
      </p>
      <p class="rsvp"><%= t('pdfs.digital_invitation.rsvp', name: "#{contact_first} #{contact_last}") %><br/><a href="tel:<%= contact_phone %>"><%= contact_phone %></a>&nbsp;<%= t('pdfs.digital_invitation.or') %>&nbsp;<a href="mailto:<%= contact_email %>"><%= contact_email %></a></p>
      <a class="waiver" href="<%= location_url %>"><%= t('pdfs.digital_invitation.waiver', slug: location.slug) %></a>
      <p class="legal">
        <%= t('pdfs.digital_invitation.legal_1') %> <%= t('pdfs.digital_invitation.legal_2') %> <%= t('pdfs.digital_invitation.legal_highlight') %>
      </p>
    </main>

    <footer>
      <div class="logo-wrapper"><%= image_tag wicked_pdf_asset_base64("skyzone_logo.svg") %></div>
    </footer>
  </body>
</html>

样式表：

// Declaring the font for pdf specifically to just use the truetype version
@font-face {
  font-family: 'EngschriftDIND';
  font-weight: normal;
  src: asset-data-url('3329DD_0_0.ttf') format('truetype');
}

$font-heading: 'EngschriftDIND', sans-serif;
$orange: #f36e36;

// everything generated under the assumption of an 8.5x11 page at 96dpi (816px x 1056px)

#template1,
#template2,
#template3 {
  width: 816px;
  height: 1056px;
  font-family: 'Roboto', sans-serif;
  color: #050708;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
  position: relative;

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  p {
    font-size: 16px;
  }

  a {
    text-decoration: none;
    color: inherit;
  }

  main {
    position: relative;
    display: block;
  }

  main > * {
    margin-bottom: 5%;
  }

  .title {
    font-size: 116px;
    font-family: $font-heading;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 0.9;
  }

  .name {
    font-family: $font-heading;
    font-size: 48px;
    font-weight: normal;
    text-transform: uppercase;
    line-height: 1;
  }

  .invite {
    font-size: 20px;
  }

  .location > strong {
    font-size: 20px;
  }

  .waiver {
    display: inline-block;
    background: $orange;
    padding: 12px;
    color: white;
    text-transform: uppercase;
    font-size: 12px;
  }

  footer {
    position: absolute;
    width: 100%;
    bottom: 0px;
  }

  .logo-wrapper {
    margin-left: auto;
    width: 190px;
    height: 26px;
  }

  .legal {
    font-size: 10px;
    line-height: 14px;
  }
}

#template1 {
  color: white;

  a,
  .name,
  .times {
    color: $orange;
  }

  main {
    top: 130px;
    left: 54px;
    width: 526px;
    padding: 30px;
    background-color: black;
  }

  .waiver {
    margin: 30px 0 10px;
  }

  footer {
    padding: 0 54px 30px;
    color: gray;
  }
}

#template2 {
  a,
  .name,
  .times {
    color: $orange;
  }

  main {
    top: 60px;
    left: 280px;
    width: 480px;
    padding: 50px 30px 30px;
    border: 6px solid #f7a93b;
    text-align: center;
  }

  .waiver {
    margin-top: 30px;
  }

  footer {
    padding: 10px 60px;
  }

  .legal {
    text-align: right;
    padding: 10px 0;
  }
}

#template3 {
  main {
    top: 300px;
    left: 40px;
    width: 480px;
    text-align: center;
  }

  main > * {
    margin-bottom: 4%;
  }

  .title {
    color: $orange;
    line-height: 0.8;
  }

  .times > span {
    margin: 0 10px;
  }

  .waiver {
    margin-bottom: 0;
  }

  .legal {
    color: darkgray;
    text-align: center;
    padding: 10px 60px;
  }

  footer {
    padding: 24px 40px;
  }
}

从 HTML 模板呈现 PDF 的代码：

def render_html
  I18n.locale = locale.presence || I18n.default_locale
  # code from https://github.com/mileszs/wicked_pdf/wiki/Background-PDF-creation-via-delayed_job-gem
  av = ActionView::Base.new
  av.view_paths = ActionController::Base.view_paths
  av.class_eval do
    include Rails.application.routes.url_helpers
    include AddressHelper
  end
  av.render template: "site/locations/pdfs/#{template}", locals: data
end

def create_pdf
  t = Tempfile.new(["#{template}-", '.pdf'], Rails.root.join('tmp'))
  t.binmode
  pdf = WickedPdf.new.pdf_from_string(render_html,
      encoding: "UTF-8", page_size: 'Letter', margin: { top: 0, bottom: 0, left: 0, right: 0 }
    )
  t.write(pdf)
  t.rewind
  self.pdf = t
  t.close!
end

这是创建内容的示例。图像很小，并且有很多空白区域。如何让它填满整个 PDF？

4

0 回答 0