Code Monkey home page Code Monkey logo

nuxt-pdf's Introduction

Nuxt PDF [WIP]

Looking for new maintainer. Since i don't work in the nuxt universe as much anymore, please write to me if you wish to take over this project.

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 <title> tag)
  • I18n support for specific languages
  • Generates as you edit (Automatic PDF regeneration)
  • For NUXT 2.x and higher

Table of Contents

Installation

npm install nuxt-pdf --save-dev

or

yarn add -D nuxt-pdf

Usage

  • Add the class .page to your page to display when printing, for formatting, add classes: .a1, .a2, .a3, .a4, .a5, .letter, .legal, or .tabloid

  • Add nuxt-pdf to the buildModules section of your nuxt.config.js file:

buildModules: ['nuxt-pdf']
  • Add a custom configuration with the pdf property.

You can see the available options in the example configuration

// nuxt.config.js

{
  buildModules: [
    'nuxt-pdf'
  ],
  pdf: {
    // custom configuration
  }
}

Configuration

// 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"
        }
      }
    ]
  }
}
  • PDF generation

PDFs will be generated when running nuxt build, nuxt generate or in development nuxt dev

Development

$ git clone https://github.com/ch99q/nuxt-pdf.git

$ cd nuxt-pdf

$ yarn

License

MIT License

nuxt-pdf's People

Contributors

ch99q avatar dependabot[bot] avatar imrealashu avatar jerodfritz avatar rvondohlen avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

nuxt-pdf's Issues

Unable to resolve module 'puppeteer'

Due to the module is using puppeteer in its core and puppeteer only is a devDependency.

It needs to be moved from devDependencies to dependencies.

Request to add Demo / Example page

This repo looks promising. Author added how to add nuxt-pdf as module in nuxt.config.js file.
but readme.md does not clarify how to use nuxt-pdf in .vue file or .js file.

Please give some example/demo about usage of nuxt-pdf in .vue file.

How to use?

Hello! I really like this package and want to use on a project. But I don't get how to use this. I follow all steps of configuration but I need to know how to trigger the function to generate the pdf.

Can you help me, please?

Module failing at nuxt generate

Hi! First, thanks for this nice module!

I get an error when running nuxt generate :
image

Here is my package.json relevant part:

"dependencies": {
    "@nuxt/content": "^1.14.0",
    "nuxt": "^2.15.7",
    "puppeteer": "^11.0.0",
    "vuetify": "^2.5.5",
  },
  "peerDependencies": {
    "puppeteer": "^5.0.0"
  },
  "devDependencies": {
    "@nuxt/image": "^0.4.13",
    "nuxt-pdf": "^2.0.1",
  },

I haven't looked into it much but I guess it could related to breaking changes in nuxt? If so the faulty part should be here:

nuxt = await loadNuxt('start')

pdf created but completely empty

Hi,
I just stumbled upon your plugin and it was exactly what I was looking for. Unfortunately, the generated .pdf is completely empty. I am using @nuxt/content for product pages and then want to use nuxt-pdf to generate a companion pdf of the same page. What could be a good reason, why the generated pdf ist completely empty?

Thanks!

The "path" argument must be of type string

Hey Christian, it's me again :D

I updated to use the latest version and update the configs like what you say on #7 .

After that, when I try to run "npm run generate", the follow error appears:

โ„น Generating pdfs                                                                                      17:50:51

 FATAL  The "path" argument must be of type string. Received undefined                                 17:50:52

  at validateString (internal/validators.js:120:11)
  at Proxy.resolve (path.js:139:9)
  at node_modules\nuxt-pdf\lib\module.js:130:18
  at async Nuxt.callHook (node_modules\hable\dist\hable.js:1:1021)
  at async Generator.generate (node_modules\@nuxt\generator\dist\generator.js:126:5)
  at async Object.run (node_modules\@nuxt\cli\dist\cli-generate.js:362:24)
  at async NuxtCommand.run (node_modules\@nuxt\cli\dist\cli-index.js:2798:7)


   โ•ญโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ•ฎ
   โ”‚                                                                                            โ”‚
   โ”‚   โœ– Nuxt Fatal Error                                                                       โ”‚
   โ”‚                                                                                            โ”‚
   โ”‚   TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received   โ”‚
   โ”‚   undefined                                                                                โ”‚
   โ”‚                                                                                            โ”‚
   โ•ฐโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ•ฏ

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] generate: `nuxt generate --modern`

My current config for pdf is that:

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: {
      format: 'A4',
      printBackground: true
    },

    // PDF Meta configuration
    meta: {
      title: process.env.npm_package_description,

      author: process.env.npm_package_author,
      subject: process.env.npm_package_description + ' @ ' + process.env.url,

      producer: process.env.npm_package_author,

      creationDate: new Date(),

      keywords: ['pdf', 'resume', process.env.npm_package_author]
    },

    // PDF generation routes. (expanding nuxt.generate)
    routes: [
      {
        file: 'resume-artifacts/Adriano_Cahete-Resume.pdf',
        route: 'resume',

        meta: {
          title: process.env.npm_package_description
        }
      }
    ]
  },

resume route/page exists (can be viewed on browsers), resume-artifacts too, other resumes are in there.

dev task works, but don't generate the resume in the folder. If I remove pdf configs build works, but nothing is generated (as expected, I think).

I'm doing something wrong here?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.