CODEWITHSUNDEEP
ruby-on-railspdfvue.jsnuxt.js
Christoffer Johansen
Christoffer Johansen

Reputation: 709

Generate PDF from Vue template

I need to create downloadable pdfs of a page which is rendered using Vue. The html to template API we're using is DocRaptor.

Two types of approaches are possible:

  1. Passing in a url to the page, which is then rendered to a PDF. Problems.

    • The page is behind our auth, do I pass in the session token in the header?
    • Page is calling our API, meaning the above wouldn't even matter...I assume you the page will only fetch the raw html, not run JS in the DocRaptor POST request.

  2. Passing in the raw html in the DocRaptor POST request, with styling. Problems

    • We don't use server side rendering, so don't have access to a nice pre rendered html string
    • Figuring out how to compile vue to raw html

Am I way off the mark here?

The two options above seem like the way to go. Would love for option 1 to work, but I don't see how - which leaves me with option 2, however no amount of googling has given me answers beyond server side rendering. Can I even do that for single pages? I assume the whole app gets rendered.

Upvotes: 0

Views: 3094

Answers (2)

Robert Massa
Robert Massa

Reputation: 4608

Option 1 could work, assuming you have some sort of authentication mechanism in place (for example a short lived token). DocRaptor does indeed execute your javascript, so it should work.

Upvotes: 1

Vasfed
Vasfed

Reputation: 18504

You can render to an invisible element on client (or may be even visible and make user think that this is a preview) and then use old good innerHTML:

let html = document.querySelector('#render-placeholder').innerHTML;

and then post it to server to forward to pdf renderer (to keep service access tokens secret).

Upvotes: 0

Related Questions