nuxt-pdf

NuxtJS module to generate PDF files and manage PDF in your Nuxt application

Usage no npm install needed!

<script type="module">
  import nuxtPdf from 'https://cdn.skypack.dev/nuxt-pdf';
</script>

README

Nuxt PDF [WIP]

npm npm (scoped with tag) License

Generate PDF files directly from your content on your website, can be used for offline downloadable documentation pages.

Features

  • Create PDF from Vue template
  • Automatic PDF Generation
  • Customizable Metadata
  • Supports (A1, A2, A3, A4, A5, Letter, Legal, Tabloid)
  • Support dynamic routes (Nuxt Generate)
  • Support dynamic titles (from tag)</li> <li>I18n support for specific languages</li> <li>Generates as you edit (Automatic PDF regeneration)</li> <li>For <b>NUXT 2.x</b> and higher</li> </ul> <h2><a id="table-of-contents" class="anchor" aria-hidden="true" href="#table-of-contents"></a>Table of Contents</h2> <ul> <li><a href="#installation">Installation</a></li> <li><a href="#usage">Usage</a></li> <li><a href="#configuration">Configuration</a></li> <li><a href="#development">Development</a></li> <li><a href="#license">License</a></li> </ul> <h2><a id="installation" class="anchor" aria-hidden="true" href="#installation"></a>Installation</h2> <pre><code class="language-shell">npm install nuxt-pdf --save-dev </code></pre> <p>or</p> <pre><code class="language-shell">yarn add -D nuxt-pdf </code></pre> <h2><a id="usage" class="anchor" aria-hidden="true" href="#usage"></a>Usage</h2> <ul> <li><p>Add the class <code>.page</code> to your page to display when printing, for formatting, add classes: <code>.a1</code>, <code>.a2</code>, <code>.a3</code>, <code>.a4</code>, <code>.a5</code>, <code>.letter</code>, <code>.legal</code>, or <code>.tabloid</code></p> </li> <li><p>Add <code>nuxt-pdf</code> to the <code>buildModules</code> section of your <code>nuxt.config.js</code> file:</p> </li> </ul> <pre><code class="language-js">buildModules: ['nuxt-pdf'] </code></pre> <ul> <li>Add a custom configuration with the <code>pdf</code> property.</li> </ul> <p>You can see the available options in the example <a href="#configuration">configuration</a></p> <pre><code class="language-js">// nuxt.config.js { buildModules: [ 'nuxt-pdf' ], pdf: { // custom configuration } } </code></pre> <h2><a id="configuration" class="anchor" aria-hidden="true" href="#configuration"></a>Configuration</h2> <pre><code class="language-javascript">// nuxt.config.js { pdf: { /* * Output folder for generated pdf. */ dir: "static", /* * Function options for page.pdf([options]) * Read more: https://pptr.dev/#?product=Puppeteer&version=v2.0.0&show=api-pagepdfoptions */ pdf: { // Change the format of the pdfs. format: "A4", // This is optional printBackground: true // Include background in pdf. } /* * Function options for page.setViewport([options]) * Read more: https://pptr.dev/#?product=Puppeteer&version=v2.0.0&show=api-pagesetviewportviewport */ viewport: { // override the default viewport width: 1280, height: 800 }, /* * Enable i18n support. */ i18n: false, /* * Add options to the puppeteer launch. * Read more: https://pptr.dev/#?product=Puppeteer&version=v2.0.0&show=api-puppeteerlaunchoptions */ puppeteer: { // Puppeteer options here... E.g. env: {} }, /* * PDF Meta configuration. (inspired by vue-meta) */ meta: { title: "My Module", titleTemplate: "Documentation ─ %s", author: "Christian Hansen", subject: "Example", producer: "Example Inc.", // Control the date the file is created. creationDate: new Date(), keywords: ["pdf", "nuxt"] }, /* * PDF generation routes. (expanding nuxt.generate) */ routes: [ { // Output file inside output folder. file: "downloads/documentation.pdf", // Route to content that should be converted into pdf. route: "docs", // Default option is to remove the route after generation so it is not accessible keep: true, // defaults to false // Specifify language for pdf. (Only when i18n is enabled!) locale: 'da', // Override global meta with individual meta for each pdf. meta: { title: "Home" }, pdf: { // route specific pdf options landscape: true // Include background in pdf. }, viewport: { // route specific viewport width: 1280, height: 800 }, }, { // Output: static/downloads/documentation-vue.pdf file: "downloads/documentation-vue.pdf", // Will generate route https://localhost:3000/docs/vue route: "docs/vue", // Title will be Documentation - Vue meta: { title: "Vue" } } ] } } </code></pre> <ul> <li>PDF generation</li> </ul> <p>PDFs will be generated when running <code>nuxt build</code>, <code>nuxt generate</code> or in development <code>nuxt dev</code></p> <h2><a id="development" class="anchor" aria-hidden="true" href="#development"></a>Development</h2> <pre><code class="language-bash">$ git clone https://github.com/ch99q/nuxt-pdf.git $ cd nuxt-pdf $ yarn </code></pre> <h2><a id="license" class="anchor" aria-hidden="true" href="#license"></a>License</h2> <p><a href="./LICENSE">MIT License</a></p> </div></article> <aside><h2 class="svelte-1u3txz5">Details</h2> <dl class="details f-d1 svelte-1u3txz5"><div class="svelte-1u3txz5"><dt class="svelte-1u3txz5">Downloads (weekly)</dt> <dd class="f-mono f-h1"><div class="container svelte-a3j687"><div class="dot svelte-a3j687"></div> <div class="dot svelte-a3j687"></div> <div class="dot svelte-a3j687"></div> </div></dd> </div><div class="svelte-1u3txz5"><dt class="svelte-1u3txz5">Updated</dt> <dd><time class="" datetime="2021-03-30T16:23:13.095Z">March 30, 2021</time></dd> </div><div class="svelte-1u3txz5"><dt class="svelte-1u3txz5">Created</dt> <dd><time class="" datetime="2019-12-04T11:16:55.298Z">December 4, 2019</time></dd> </div><div class="svelte-1u3txz5"><div class="wrapper svelte-qjxoui"><dt class="header svelte-qjxoui"><span class="title svelte-qjxoui">Package score <a class="ml1 f-w400" href="https://docs.skypack.dev/package-authors/package-checks" target="_blank">learn more</a></span> <span class="f-u1"> <div class="container svelte-a3j687"><div class="dot svelte-a3j687"></div> <div class="dot svelte-a3j687"></div> <div class="dot svelte-a3j687"></div> </div></span></dt> <dd class="pt1"><ul class="checks"><li class="checks-check svelte-qjxoui"><span class="status__loading svelte-qjxoui" aria-label="loading"></span>Package Security </li><li class="checks-check svelte-qjxoui"><span class="status__warn svelte-qjxoui" aria-label="not added yet"></span> ES Module Entrypoint <a class="action svelte-qjxoui" href="https://docs.skypack.dev/package-authors/package-checks#esm" target="_blank" rel="noopener noreferrer">Info</a> </li><li class="checks-check svelte-qjxoui"><span class="status__warn svelte-qjxoui" aria-label="not added yet"></span> Export Map <a class="action svelte-qjxoui" href="https://docs.skypack.dev/package-authors/package-checks#export-map" target="_blank" rel="noopener noreferrer">Info</a> </li><li class="checks-check svelte-qjxoui"><svg class="status__check svelte-qjxoui" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 9"><title>added Keywords
  • added License
  • added README
  • added Repository URL
  • TypeScript Types Info
License
MIT
Dependencies
2
Links
Keywords
Collaborators