Menghasilkan PDF dari HTML dengan Rails

() translation by (you can also view the original English article)

Ada banyak cara untuk menghasilkan PDF di Ruby and Rails. Kemungkinannya adalah Anda sudah terbiasa dengan HTML dan CSS, jadi kita akan menggunakan PDFKit untuk menghasilkan file PDF menggunakan HTML dari view Rails standar dan kode gaya.

Pengenalan PDFKit

Secara internal, PDFKit menggunakan wkhtmltopdf (WebKit HTML to PDF), sebuah mesin yang akan mengambil HTML dan CSS, me-render menggunakan WebKit, dan mengeluarkannya sebagai PDF dengan kualitas tinggi.

Untuk memulai, instal wkhtmltopdf di komputer Anda. Anda dapat mengunduh biner-nya atau menginstal dari Brew di Mac, atau repositori Linux pilihan Anda.

Anda juga perlu menginstal pdfkit gem, dan kemudian menjalankan sedikit Ruby berikut untuk menghasilkan PDF dengan teks "Hello Envato!"

require "pdfkit"

kit = PDFKit.new(<<-HTML)
  <p>Hello Envato!</p>
HTML

kit.to_file("hello.pdf")

Anda harus memiliki file baru bernama hello.pdf dengan teksnya di bagian atas.

An example of the PDF that was generated

Contoh dari PDF yang dihasilkanPDFKit juga memungkinkan Anda untuk menghasilkan PDF dari URL. Jika Anda ingin menghasilkan PDF dari beranda Google, Anda dapat menjalankan:

1	require "pdfkit"
2
3	PDFKit.new('https://www.google.com', :page_size => 'A3').to_file('google.pdf')

Seperti yang Anda lihat, saya menentukan ukuran page_size-secara default, A4 digunakan. Anda dapat melihat daftar opsi lengkap di sini.

An example of the Google homepage in PDF format

Menata PDF Anda Menggunakan CSS

Sebelumnya saya menyebutkan bahwa kita akan menghasilkan file PDF menggunakan HTML dan CSS. Dalam sampel ini, saya telah menambahkan sedikit CSS untuk mendesain HTML untuk faktur sampel, seperti yang Anda lihat:

require "pdfkit"

kit = PDFKit.new(<<-HTML)
  <style>
    * {
      color: grey;
    }
    h1 {
      text-align: center;
      color: black;
      margin-bottom: 100px;
    }
    .notes {
      margin-top: 100px;
    }

    table {
      width: 100%;
    }
    th {
      text-align: left;
      color: black;
      padding-bottom: 15px;
    }
  </style>

  <h1>Envato Invoice</h1>

  <table>
    <thead>
        <tr>
          <th>Description</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
          <tr>
            <td>Monthly Subscription to Tuts+</td>
            <td>$15</td>
          </tr>
      </tbody>
  </table>

  <div class="notes">
    <p><strong>Notes:</strong> This invoice was paid on the 23rd of March 2016 using your credit card ending on 1234.</p>
  </div>
HTML

kit.to_file("envato_invoice.pdf")

Jika Anda menjalankan skrip ini, file envato_invoice.pdf akan dibuat. Foto ini menunjukkan hasil dari faktur sampel:

Contoh dari PDF faktur EnvatoSeperti yang Anda lihat, PDFKit sangat mudah digunakan, jika Anda sudah terbiasa dengan HTML dan CSS. Anda dapat terus menyesuaikan atau menata dokumen ini sesuka Anda.

Menggunakan PDFKit dari Aplikasi Rails

Sekarang mari kita lihat bagaimana menggunakan PDFKit dalam konteks aplikasi Rails, sehingga kita dapat secara dinamis menghasilkan file PDF menggunakan data dari model kita. Di bagian ini kita akan membangun aplikasi rails sederhana untuk menghasilkan "Envato Invoice" sebelumnya secara dinamis. Mulailah dengan membuat aplikasi rails baru dan menambahkan tiga model:

$ rails new envato_invoices
$ cd envato_invoices

$ rails generate model invoice date:date client notes
$ rails generate model line_item description price:float invoice:references

$ rake db:migrate

Sekarang, kita harus menambahkan beberapa data sampel ke database. Tambahkan potongan kode ini ke db/seeds.rb.

line_items = LineItem.create([
    { description: 'Tuts+ Subscription April 2016', price: 15.0 }, 
    { description: 'Ruby eBook', price: 9.90} ])
Invoice.create(
    client: 'Pedro Alonso', 
    total: 24.90, 
    line_items: line_items, 
    date: Date.new(2016, 4, 1))

Jalankan rake db:seed di terminal Anda untuk menambahkan faktur sampel ke database.

Kita juga tertarik untuk membuat daftar faktur dan detail satu faktur di aplikasi kita, jadi menggunakan generator rails, jalankan rails generate controller Invoices index show untuk membuat controller dan views.

app/controllers/invoices_controller.rb

class InvoicesController < ApplicationController
  def index
    @invoices = Invoice.all
  end

  def show
    @invoice = Invoice.find(params[:id])
  end
end

app/views/invoices/index.html.erb

<h1>Invoices</h1>
<ul>
  <% @invoices.each do |invoice| %>
  <li>
    <%= link_to "#{invoice.id} - #{invoice.client} - #{invoice.date.strftime("%B %d, %Y")} ", invoice_path(invoice) %>
  </li>
  <% end %>
</ul>

Kita perlu memodifikasi rute rails untuk mengarahkan ke InvoicesController secara default, jadi edit config/routes.rb:

Rails.application.routes.draw do
  root to: 'invoices#index'

  resources :invoices, only: [:index, :show]
end

Mulai rails server Anda dan navigasikan ke localhost:3000 untuk melihat daftar faktur:

app/views/invoices/show.html.erb

<div class="invoice">
  <h1>Envato Invoice</h1>

  <h3>To: <%= @invoice.client %></h3>
  <h3>Date: <%= @invoice.date.strftime("%B %d, %Y") %></h3>

  <table>
    <thead>
        <tr>
          <th>Description</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        <% @invoice.line_items.each do |line_item| %>
          <tr>
            <td><%= line_item.description %></td>
            <td><%= number_to_currency(line_item.price) %></td>
          </tr>
        <% end %>
        <tr class="total">
          <td style="text-align: right">Total: </td>
          <td><%= number_to_currency(@invoice.total) %></span></td>
        </tr>
      </tbody>
  </table>

  <% if @invoice.notes %>
  <div class="notes">
    <p><strong>Notes:</strong> <%= @invoice.notes %></p>
  </div>
  <% end %>
</div>

CSS untuk halaman detail faktur ini telah dipindahkan ke app/assets/stylesheets/application.scss

.invoice {
  width: 700px;
  max-width: 700px;
  border: 1px solid grey;
  margin: 50px;
  padding: 50px;

  h1 {
    text-align: center;
    margin-bottom: 100px;
  }
  .notes {
    margin-top: 100px;
  }

  table {
    width: 90%;
    text-align: left;
  }
  th {
    padding-bottom: 15px;
  }

  .total td {
    font-size: 20px;
    font-weight: bold;
    padding-top: 25px;
  }
}

Kemudian ketika Anda mengklik faktur di halaman daftar utama, Anda akan melihat detailnya:

View fakturPada titik ini, kita siap untuk menambahkan fungsionalitas ke aplikasi rails kita untuk melihat atau mengunduh faktur dalam PDF.

Kelas InvoicePdf untuk Menangani Render PDF

Untuk me-render faktur dari aplikasi rails kita ke PDF, kita perlu menambahkan tiga gem ke Gemfile: PDFKit, render_anywhere, dan wkhtmltopdf-binary. Secara default, rails hanya memungkinkan Anda untuk me-render template dari controller, tetapi dengan menggunakan render_anywhere, kita bisa me-render template dari model atau pekerjaan latar belakang.

1	gem 'pdfkit'
2	gem 'render_anywhere'
3	gem 'wkhtmltopdf-binary'

Agar tidak mencemari controller kita dengan terlalu banyak logika, saya akan membuat kelas InvoicePdf baru di dalam folder app/models untuk membungkus logika untuk menghasilkan PDF.

require "render_anywhere"

class InvoicePdf
  include RenderAnywhere

  def initialize(invoice)
    @invoice = invoice
  end

  def to_pdf
    kit = PDFKit.new(as_html, page_size: 'A4')
    kit.to_file("#{Rails.root}/public/invoice.pdf")
  end

  def filename
    "Invoice #{invoice.id}.pdf"
  end

  private

    attr_reader :invoice

    def as_html
      render template: "invoices/pdf", layout: "invoice_pdf", locals: { invoice: invoice }
    end
end

Kelas ini hanya mengambil faktur untuk di-render sebagai parameter pada constructor kelas. Metode private as_html sedang membaca view template invoices/pdf dan layout_pdf yang kita gunakan untuk menghasilkan HTML yang perlu kita render sebagai PDF. Terakhir, metode to_pdf menggunakan PDFKit untuk menyimpan file PDF di folder public rails.

Mungkin Anda ingin membuat nama dinamis di aplikasi nyata Anda sehingga file PDF tidak ditimpa secara tidak sengaja. Anda mungkin ingin menyimpan file di AWS S3 atau folder pribadi juga, tapi itu di luar cakupan tutorial ini.

/app/views/invoices/pdf.html.erb

<div class="invoice">
  <h1>Envato Invoice</h1>

  <h3>To: <%= invoice.client %></h3>
  <h3>Date: <%= invoice.date.strftime("%B %d, %Y") %></h3>

  <table>
    <thead>
        <tr>
          <th>Description</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        <% invoice.line_items.each do |line_item| %>
          <tr>
            <td><%= line_item.description %></td>
            <td><%= number_to_currency(line_item.price) %></td>
          </tr>
        <% end %>
        <tr class="total">
          <td style="text-align: right">Total: </td>
          <td><%= number_to_currency(invoice.total) %></span></td>
        </tr>
      </tbody>
  </table>

  <% if invoice.notes %>
  <div class="notes">
    <p><strong>Notes:</strong> <%= invoice.notes %></p>
  </div>
  <% end %>
</div>

/app/views/layouts/invoice_pdf.erb

<!DOCTYPE html>
<html>
<head>
  <title>Envato Invoices</title>
  <style>
    <%= Rails.application.assets.find_asset('application.scss').to_s %>
  </style>
</head>
<body>
  <%= yield %>
</body>
</html>

Satu hal yang perlu diperhatikan dalam file layout ini adalah bahwa kita me-render gaya dalam layout. WkHtmlToPdf bekerja lebih baik jika kita memberikan gaya dengan cara ini.

DownloadsController untuk Me-render Faktur PDF

Pada titik ini kita membutuhkan rute dan controller yang memanggil kelas InvoicePdf untuk mengirim file PDF ke browser, jadi edit config/routes.rb untuk menambahkan sumber daya bersarang:

Rails.application.routes.draw do
  root to: "invoices#index"

  resources :invoices, only: [:index, :show] do
    resource :download, only: [:show]
  end
end

Jika kita menjalankan rake routes, kita melihat daftar rute yang tersedia di aplikasi:

          Prefix Verb URI Pattern                              Controller#Action
            root GET  /                                        invoices#index
invoice_download GET  /invoices/:invoice_id/download(.:format) downloads#show
        invoices GET  /invoices(.:format)                      invoices#index
         invoice GET  /invoices/:id(.:format)                  invoices#show

Tambahkan app/controllers/downloads_controller.rb:

class DownloadsController < ApplicationController

  def show
    respond_to do |format|
      format.pdf { send_invoice_pdf }
    end
  end

  private

  def invoice_pdf
    invoice = Invoice.find(params[:invoice_id])
    InvoicePdf.new(invoice)
  end

  def send_invoice_pdf
    send_file invoice_pdf.to_pdf,
      filename: invoice_pdf.filename,
      type: "application/pdf",
      disposition: "inline"
  end
end

Seperti yang Anda lihat, ketika permintaan meminta file PDF, metode send_invoice_pdf sedang memproses permintaannya. Metode invoice_pdf hanya menemukan faktur dari database berdasarkan id, dan membuat instance dari InvoicePdf. Kemudian send_invoice_pdf hanya memanggil metode to_pdf, untuk mengirim file PDF yang dihasilkan ke browser.

Satu hal yang perlu diperhatikan adalah kita mengirimkan parameter disposition: "inline" ke send_file. Parameter ini mengirim file ke browser, dan itu akan ditampilkan. Jika Anda ingin memaksa file untuk diunduh, maka Anda harus memberikan disposition: "attachment".

Tambahkan tombol unduh ke template tampilan faktur Anda app/views/invoices/show.html.erb:

1	<%= link_to "Download PDF",
2	invoice_download_path(@invoice, format: "pdf"),
3	target: "_blank",
4	class: "download" %>

Jalankan aplikasi, navigasikan ke rincian faktur, klik unduh, dan tab baru akan terbuka menampilkan Faktur PDF.

Render PDF sebagai HTML dalam Pengembangan

Saat Anda sedang mengerjakan markup untuk PDF Anda, keharusan untuk menghasilkan PDF setiap kali Anda ingin menguji suatu perubahan terkadang bisa lambat. Untuk alasan ini, dapat melihat HTML yang akan dikonversi ke PDF sebagai HTML biasa bisa sangat berguna. Kita hanya perlu mengedit /app/controllers/downloads_controller.rb.

class DownloadsController < ApplicationController

  def show
    respond_to do |format|
      format.pdf { send_invoice_pdf }

      if Rails.env.development?
        format.html { render_sample_html }
      end
    end
  end

  private

  def invoice
    Invoice.find(params[:invoice_id])
  end

  def invoice_pdf
    InvoicePdf.new(invoice)
  end

  def send_invoice_pdf
    send_file invoice_pdf.to_pdf,
      filename: invoice_pdf.filename,
      type: "application/pdf",
      disposition: "inline"
  end

  def render_sample_html
    render template: "invoices/pdf", layout: "invoice_pdf", locals: { invoice: invoice }
  end
end

Sekarang metode show juga merespons permintaan HTML dalam mode pengembangan. Rute untuk faktur PDF akan seperti http://localhost:3000/invoices/1/download.pdf. Jika Anda mengubahnya ke http://localhost:3000/invoices/1/download.html, Anda akan melihat faktur dalam HTML menggunakan markup yang digunakan untuk menghasilkan PDF.

Dengan kode di atas, membuat file PDF menggunakan Ruby on Rails sangat mudah dengan asumsi Anda terbiasa dengan bahasa Ruby dan kerangka kerja Rails. Mungkin aspek terbaik dari keseluruhan proses adalah Anda tidak perlu mempelajari bahasa markup baru atau spesifik tentang pembuatan PDF.

Semoga tutorial ini terbukti bermanfaat. Silakan tinggalkan pertanyaan, komentar, dan umpan balik di komentar dan saya akan dengan senang hati menindaklanjutinya.