Hello, 我是 Weber，一位 RoR 工程師，斜槓鼓手與行銷顧問。
每日一套件第 26 天，跟著我一起認識 Rails 開發好用的 30 個套件，建立出自己的常用套件庫吧！
今天要介紹的是 wicked_pdf 這個套件，是一個可以將頁面轉換為 pdf 檔的套件。
要使用 wicked_pdf ，也要一起安裝 wkhtmltopdf-binary 這個套件，而且是必要的。因為 wicked_pdf 其實是基於 wkhtmltopdf 的 command line tools 將 HTML 轉成 pdf 的。
首先，安裝兩個套件。
$ bundle add wicked_pdf
$ bundle add wkhtmltopdf-binary
$ rails g wicked_pdf
會產生 config/initializers/wicked_pdf.rb 這個設定檔。
這個設定檔有一個重要的用處，就是要描述你的 wkhtmltopdf 在哪裏。
可以藉由 which 指令來找尋你安裝的位置，預設是 /usr/local/bin/wkhtmltopdf，但這因人而異
我的位置是在 /Users/weber/.rvm/gems/ruby-3.2.2/bin/wkhtmltopdf 所以我就要換掉。
which wkhtmltopdf
config/initializers/wicked_pdf.rb
WickedPdf.config = {
exe_path: '/Users/weber/.rvm/gems/ruby-3.2.2/bin/wkhtmltopdf' #請根據你的位置調整
}
或者在 config/application.rb 裡設定也行
config.wicked_pdf = {
exe_path: '/Users/weber/.rvm/gems/ruby-3.2.2/bin/wkhtmltopdf' #請根據你的位置調整
}
接著在你要使用的 controller 中編寫，好比說我採用 pages#index ：
def index
respond_to do |format|
format.html
format.pdf do
render pdf: "file_name"
end
end
end
render pdf: 這塊，有許多種寫法，等等回頭再談。
接著，依照我剛寫的controller，我需要產生兩個 format, HTML 跟 pdf
所以我在 pages 的 view 之中創造兩個檔案，index.html.erb 以及 index.pdf.erb
這裡我沿用之前 Nokogiri 的專案，天瓏書局 - 近30天中文熱門暢銷 的頁面。
我在 index.html.erb view 中多寫入一個 a tag 按鈕
<%= link_to '下載 PDF', root_path(format: :pdf) %>
另外 index.pdf.erb 重寫，並加入
<%= wicked_pdf_stylesheet_link_tag "pdf" -%>
<%= wicked_pdf_javascript_include_tag "number_pages" %>
<!DOCTYPE html>
<html>
<head>
<title>Fun_Nokogiri</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= wicked_pdf_stylesheet_link_tag "pdf" -%>
<%= wicked_pdf_javascript_include_tag "number_pages" %>
</head>
<body onload="number_pages">
<div id="header">
<%= wicked_pdf_image_tag 'mysite.jpg' %>
</div>
<div id="content">
<%= yield %>
</div>
</body>
</html>
這裡都準備好了，再回頭講剛剛 controller 的 render 那塊，我是寫做：
render pdf: "file_name", template: "pages/index", formats: [:html], encoding: 'UTF-8' , dpi: 72
應該可以理解吧，我有點懶得解釋了
白話表示：請 PDF 用 "pages/index" 當 template，採:html formats，編碼 UTF-8，dpi 72
恩？ 有解釋跟沒解釋一樣
按鈕點下去，就看到這樣了
噹啷～～成功了！
有任何問題請隨時發問！我們明天見！
iThome鐵人賽
看影片追技術