Elixir에서 PDF 파일을 생성하고 Phoenix에서 정적 파일로 호스팅

12727 단어 ElixirPhoenixPDF
관련 안건으로 Elixir+Phoenix로 짜는 백엔드 서버에서 PDF를 작성해 Web 표시하는 요건이 나왔기 때문에, 해 보았습니다.

시도한 것은 다음 라이브러리

wkhtmltopdf라는 라이브러리의 Wrapper라는 것
사용법은 매우 간단했다.

절차



wkhtmltopdf 설치



이하의 공식 사이트에서 OS에 맞춘 인스톨러를 사용한다.

필자는 Mac에서 실시

프로젝트 만들기


> mix phx.new pdf_sample --no-ecto --no-brunch

deps 추가



mix.exs
  def application do
    [
      mod: {PdfSample.Application, []},
      extra_applications: [:logger, :runtime_tools, :pdf_generator] #<- :pdf_generator追加
    ]
  end
  defp deps do
    [
      {:phoenix, "~> 1.3.2"},
      {:phoenix_pubsub, "~> 1.0"},
      {:phoenix_html, "~> 2.10"},
      {:phoenix_live_reload, "~> 1.0", only: :dev},
      {:gettext, "~> 0.11"},
      {:cowboy, "~> 1.0"},
      {:pdf_generator, ">=0.3.7" }, #<- 追加
    ]
  end
> mix .deps.get

코드 본체



이번에는 시험만 했으므로 모듈을 만들지 않고 iex로 실행했다.
iex(1)> source_html = "<html><body><p>Hi there!</p></body></html>"
# ページサイズA5とファイル名を任意指定
iex(2)> { :ok, filename } = PdfGenerator.generate source_html, page_size: "A5", 
 filepath: "/Users/tsuchiro/code/samples/pdf_sample/priv/static/pdf", filename: "sample_pdf"
# 結果は作成されたファイルのフルパスがタプルで返ってくる
iex(3)> {:ok, pdf_path} = {:ok, "/var/folders/pz/2847mdrn0gz51b2tctnfqc740000gn/T/sample_pdf.pdf"}
# 静的ファイルのパスにコピーする
iex(4)> File.copy(pdf_path,"./priv/static/pdf/sample_pdf.pdf")
``` 

## 画面にリンクを追加

```html:/pdf_sample_web/templates/page/index.html.eex

<div class="jumbotron">
  <h2><%= gettext "Welcome to %{name}!", name: "Phoenix" %></h2>
  <p class="lead">A productive web framework that<br />does not compromise speed and maintainability.</p>
</div>

<div class="row marketing">
  <div class="col-lg-6">
    <h4>Resources</h4>
    <ul>
      <li>
        <a href="http://phoenixframework.org/docs/overview">Guides</a>
      </li>
      <li>
        <a href="https://hexdocs.pm/phoenix">Docs</a>
      </li>
      <li>
        <a href="https://github.com/phoenixframework/phoenix">Source</a>
      </li>
       <li>
       <!--   PDFファイルへのリンクを追加  -->
        <a href="<%= static_path(@conn, "/pdf/sample_pdf.pdf") %>">PDF Document</a>
      </li>
    </ul>
  </div>

  <div class="col-lg-6">
    <h4>Help</h4>
    <ul>
      <li>
        <a href="http://groups.google.com/group/phoenix-talk">Mailing list</a>
      </li>
      <li>
        <a href="http://webchat.freenode.net/?channels=elixir-lang">#elixir-lang on freenode IRC</a>
      </li>
      <li>
        <a href="https://twitter.com/elixirphoenix">@elixirphoenix</a>
      </li>
    </ul>
  </div>
</div>


엔드포인트에 CSS를 추가합니다.



static_path는 priv/static 이하를 가리키지만, 디폴트에서는 액세스 할 수 있는 패스에 제한이 걸려 있으므로, pdf 폴더를 추가한다.
  plug Plug.Static,
    at: "/", from: :pdf_sample, gzip: false,
    only: ~w(css fonts images js pdf favicon.ico robots.txt) # <- pdfを追加

방문해보기







쉽게 할 수있었습니다.

WebKit에서 HTML을 그려서 PDF로 하고 있는 것 같기 때문에, 원래의 HTML마저 만들면 정교한 PDF도 만들 수 있을 것 같네요.

좋은 웹페이지 즐겨찾기