sidebase / nuxt-pdf

📄 A easy to use, pdf exporting module to convert Nuxt 3 components into downloadable PDFs.

sidebase

sidebase is a web development kit to build production ready fullstack Nuxt 3 apps quickly. sidebase relies on modern, fully-typed and best-practice technology to achieve this goal. sidebase embraces the fullstack TypeScript approach to app development: Code sharing between client and server, reduced learning curve for engineers and code-reuse across apps are things we love about this approach. That said, you can also use sidebase to build client-side only apps.

Visit sidebase.io/sidebase for quick-start, docs, guides and more!

To get started, run:

npm create sidebase@latest

And you are ready to go! The sidebase CLI will guide you through the process. Afterwards, or if you still want to know more, read the documentation to continue.

Features

With sidebase you can build production ready, robust, maintainable, fullstack applications:

• 🎒 Fullstack: Develop frontend and backend in a single TypeScript code base
• 🏎️ Fast to code: Database, example tests, example components and example pages are all there for you to fill out
• 🐛 Fewer bugs: Strong data-validation using Prisma to validate all data coming into the database at runtime
• 😊 Easy to use: Designed to follow best practices and to be ready-to-go for development, without additional dev-dependencies like docker that make it hard to get started
• 🚀 Ready for launch: Github Actions CI, Dockerfile, easy switch to most popular SQL-databases are all there, out of the box (get in touch if you're missing something)

To facilitate this sidebase bootstraps a nuxt 3 project that permits developing a backend and a frontend using just Nuxt 3 with overarching TypeScript support. We want to show the world how enjoyable end-to-end typescript programming can be, displacing the myth that JS/TS-backends are no good. This starter solves a lot of the "real-world" problems that occur after you start using Nuxt or any other framework: How to write backend tests? How to write component tests? How to calculate test coverage? How to integrate a database? How to build a docker image? ...?

If you have any problems with this project (e.g., setting it up on your PC) open an issue and we'll figure it out together with you 🎉

License

MIT

nuxt-pdf's Issues

getPageHeight does not existe

Environment

• Operating System: Windows_NT
• Node Version: v19.8.1
• Nuxt Version: 3.8.2
• CLI Version: 3.10.0
• Nitro Version: 2.8.0
• Package Manager: [email protected]
• Builder: -
• User Config: app, chatwoot, colorMode, cookieControl, css, dayjs, devtools, googleFonts, i18n, modules, runtimeConfig, site, sitemap, srcDir, telemetry, ui, vite, vue
• Runtime Modules: @nuxt/[email protected], @sidebase/[email protected], @nuxtjs/[email protected], [email protected], [email protected], [email protected], [email protected], [email protected], @nuxt/[email protected], @nuxtseo/[email protected], @pinia/[email protected], @dargmuesli/[email protected], [email protected], @nuxtjs/[email protected], @productdevbook/[email protected], @nuxtjs/[email protected]
• Build Modules: -

Reproduction

https://sidebase.io/nuxt-pdf/getting-started/composables#htmltopdf

Describe the bug

On the const pdfHeight = pdf.getPageHeight()

Property getPageHeight does not exist on type jsPDF

Additional context

No response

Logs

No response

PDF-Export of non rendered components

Ask your question

Hello together,

is there a possibility to export a component to pdf without rendering this component in DOM/Display? Maybe this is a nice feature for this nuxt module.

With best regards
Henni

Additional information

No response

Как добавить кириллицу?

Ask your question

Как добавить кириллицу?
Как получить из '#imports' объект jsPDF?

Additional information

No response

is there any way in which I can convert the vue component into pdf without even showing it on the page.

Ask your question

something similar that can be achieved using vue-html2pdf's show-layout option in nuxt2

Additional information

No response

How to center a component in the DIV

Ask your question

For example I have a component that has ended up creating a visualised "table" with a border. However the table is right up next to the edge of the pdf page.

How can I make it so whatever component we obtain. it centers it to the page?

Additional information

No response

the pagination needs to be handled.

Environment

No response

Reproduction

No response

Describe the bug

The PDF breaks when it's more than one page.

Additional context

No response

Logs

No response

Add support for Tailwind Classes "break-inside-*", "break-after-*", "break-before-*"

Describe the feature

I'd like to see support of CSS Page-Break-Options. So for example, that an element with Tailwind-Class "break-inside-avoid" is automatically moved to the next page if it doesn't fit in the current page.

Additional information

No response

Exporting PDF using DaisyUI

Environment

No response

Reproduction

No response

Describe the bug

I'm trying to export a pdf using this module in a project with DaisyUI, but I'm getting the attached error. Apparently it doesn't load correctly the oklch variables from Daisy.
Thank you in advance if someone can help me with this.

Additional context

No response

Logs

No response

Support server side rendering for PDFs

Describe the feature

We want to offer developers to opportunity to generate their PDFs server side for more security. In order to do this we must add a new server side function to generate and export the pdf.

A good starting point is this issue:
parallax/jsPDF#2248

Additional information

No response

Second time results in PDF with 1 blank page

Ask your question

When generating a multi page PDF the first time it's all good, but second and so one results in a PDF with 1 blank page. Only after refresh it only works the first time again. Any idea?

Additional information

'pdfSection.value' has content, even second or more times.

const generatePdf = async () => {
  const fileName = `doc-name.pdf`
  isGenerating.value = true
  try {
    await exportToPDF(
      fileName,
      pdfSection.value,
      documentOptions,
      htmlOptions.value
    )
  } catch (error) {
    console.error('PDF generation failed:', error)
  }
  isGenerating.value = false
}

How can I use custom fonts?

Ask your question

Hello,

I'm trying to use Satoshi, a custom font from FontShare, and I'm not being able to get it working. I've tried downloading the font and adding this to the html options in exportToPDF():

fontFaces: [{
    family: 'satoshi',
    weight: 'normal',
    src: [{
        url: '/GHM6WVH6MILNYOOCXHXB5GTSGNTMGXZR.woff',
        format: 'woff',
    }]
}],

I've googled about it and everyone is adding the font using jsPDF.addFont() and setFont() and I don't know how to access to those things outside of exportToPDF().then().

I'm of course using the font in my css:

html {
    overflow-x: hidden;
    background-color: var(--base-color);
    color: var(--primary-color);
    font-size: 16px;
    font-family: 'Satoshi', sans-serif;
    scroll-behavior: smooth;
}

And I also console logged jsPDF.getFontList():

{
    "helvetica": [
        "normal",
        "bold",
        "italic",
        "bolditalic"
    ],
    "Helvetica": [
        "",
        "Bold",
        "Oblique",
        "BoldOblique"
    ],
    "courier": [
        "normal",
        "bold",
        "italic",
        "bolditalic"
    ],
    "Courier": [
        "",
        "Bold",
        "Oblique",
        "BoldOblique"
    ],
    "times": [
        "normal",
        "bold",
        "italic",
        "bolditalic"
    ],
    "Times": [
        "Roman",
        "Bold",
        "Italic",
        "BoldItalic"
    ],
    "zapfdingbats": [
        "normal"
    ],
    "ZapfDingbats": [
        ""
    ],
    "symbol": [
        "normal"
    ],
    "Symbol": [
        ""
    ]
}

Help would be much appreciated 🙂

Additional information

No response

Future outline for the `NuxtPDF` module (v1.0.0)

Goal

Outline how development on NuxtPDF will continue. Decide on what to implement and how to properly execute on it.

Context

When first developing NuxtPDF we set a goal of adding a module that lets you convert Vue components into a PDF. This was done by using a html-to-pdf library. The vue component would be compiled to html and then rendered via the library. However, this method has many drawbacks, which lead to us not adopting this module into our development flows:

• Shifting layouts based on monitor size
• Missing styles, which leads to a different render from the actual component
• Complex components did not render properly
  • Forms were not editable in PDFs
  • Some texts were mismatched
• Defining a fixed page size is hard to complete properly.
• PDFs cannot be properly shared or reproduced

Therefore, we want to rewrite NuxtPDF to utilize a new method of PDF rendering that does not depend on rendering html to a PDF. This will make the PDFs more "stable" and allow for more complex PDF generation.

Server Side generation

In order to achieve this, we will move away from rendering html to a pdf and utilize a programmatic approach to define PDFs. For this we will make use of pdfkit, which includes functions to generate parts of a PDF. While this is not as easy or quick as developing a component and using it as a base, it will add the needed stability as well as allowing us to generate PDFs on the server side.

However, after testing pdfkit in our own projects we also noticed some shortcomings:

• Very basic functions to create PDFs
  • Does not contain complex rendering functions (such as tables)
• Confusing to begin development with
  • You have to impement it for Nuxt
  • Drawing lines, or changing font sizes is teady and hard to do
  • Requires a lot of self written helper functions to maintain consistency in a single PDF
• Previewing changes requires a reload on the server side, which may cause the entire application to crash (bad DX in general)

Improvements for Application side generation

This is pretty simple, but I plan to add a small collection of utility components, that can be used to properly structure the vue component. A few of these include:

• DocumentPage - which lets you select the page size (A4, A5, etc.)
  • It will then allow you to create your PDF inside this confined space, to properly align and format it even in the vue component itself
• DocumentTitle
• DocumentFooter
• DocumentTable
• Maybe more, depending on what I think of / gets requested.
• Better language support (#10)

The point of these components, is to make the start a lot easier. They will be "invisible" components, that only aim to help properly structure the page.

In addition to this, I also want to expand the docs to tackle:

• Custom fonts (also other alphabets)
• Integration of component libraries

Roadmap

In order to improve our module and maintain a high level of Developer Experience, we will implement the following features. Some features will be deprioritzed and pushed to later, to ensure we have a working minimal version before completing a full implementation.

• Including pdfkit and its functions on the server side via a nitro import
• Wrapping pdfkit in a custom function to include:
  • Injecting Data (with a zod schema or TS type)
  • Setting a "universal style" for the PDF via a config, that can be reused
    • This config will also be used for any "custom" components we include
    • This config will be simplied compared to the full config provided by pdfkit
    • This config will handle page breaking behavior
  • New Layout system.
    • Define a custom header and footer for the PDF. This header will be used to determine page height, page breaks and be inserted onto every page
    • Option to define a custom unique header for the first page, as this is often needed
• Better DX
  • Nuxt DevTools integration, to find any defined pdfs (via folder?) and display them in localhost:3000/__pdfs or via the Nuxt Devtools.
    • Sidebar that allows you to see all defined PDFs
    • PDF Preview with the generated PDFs
  • Ability to define mock data based on the zod schema or TS type
    • Future: Allow for multiple different mock data setups for proper edge case handling (a bit like a simple version of a storybook for PDFs)
• Custom components (a list of custom components we have already developed internally or we will need)
  • Header component
    • Just Logo
    • With Layout for letters (with address of recipient)
    • Page numbers
    • etc.
  • Table component
  • Divider Line component
  • Text sizes (H1, H2, H3, p etc.)
  • Dynamic boxes (with information and custom widths / heights)
  • Futhur components to come

This will allow us to have a solid base to work on PDFs in the future. While it is more complex then the current system, I think it will improve our PDFs as well as the DX compared to the native PDFkit package. Future expansions will include more components and improve DX even more. As someone who worked a lot on PDFs and with PDFKit I think the main features that contribute to this Modules worth are:

• Layouts
• Page breaking
• Components that can be reused

[unimport] failed to find "exportToPDF" imported from "#imports"

Ask your question

when I use this import { exportToPDF } from '#imports';
it does not work I have install the package but still does not work
what can I do??

Additional information

No response

svg support

Describe the feature

I noticed that currently svgs are not shown in the pdf. Im trying export a d3js chart and a table, but the chart doesnt appear. Would be nice if the package could handle svgs as well.

Additional information

No response

useRuntimeConfig missing when generating PDF serverside

Environment

------------------------------
- Operating System: Darwin
- Node Version:     v21.2.0
- Nuxt Version:     3.10.3
- CLI Version:      3.10.1
- Nitro Version:    -
- Package Manager:  [email protected]
- Builder:          -
- User Config:      devtools, modules, formkit, colorMode, kinde, stripe, routeRules
- Runtime Modules:  @formkit/[email protected], @nuxtjs/[email protected], @unlok-co/[email protected], @nuxtjs/[email protected], @sidebase/[email protected]
- Build Modules:    -
------------------------------

Reproduction

see below

Describe the bug

when trying to generate a pdf serverside, i get this error (logs section):

the api endpoint looks like this:

import { createPDF, streamReturnPDF } from '#pdf'

export default defineEventHandler(async (event) => {
  const pdf = createPDF()
  pdf.text('Welcome to NuxtPDF!')
  pdf.end()
  return streamReturnPDF(event, pdf)
}

Additional context

No response

Logs

[nuxt] [request error] [unhandled] [500] useRuntimeConfig is not defined
  at createPDF (./node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@sidebase/nuxt-pdf/dist/runtime/server/pdf.mjs:5:36)  
  at Object.handler (./server/api/generator.ts:50:1)  
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)  
  at async Object.handler (./node_modules/.pnpm/[email protected]/node_modules/h3/dist/index.mjs:1962:19)  
  at async Server.toNodeHandle (./node_modules/.pnpm/[email protected]/node_modules/h3/dist/index.mjs:2249:7)

Arabic Language Support

Environment

Hello,

How to add arabic support?

Reproduction

No response

Describe the bug

Additional context

No response

Logs

No response

can not use htmlToPdf composable

Environment

No response

Reproduction

No response

Describe the bug

trying to use htmlToPdf composable but get Uncaught TypeError: _ctx.htmlToPdf is not a function

Additional context

No response

Logs

No response

how to import nuxt-pdf

Ask your question

import { exportToPDF } from '#imports'

Additional information

No response

Do you have any examples of options?

Ask your question

According to the Quick Start Guide, there is a section to refer to 'document options'.
You can see that the link is connected to the official jsPDF document.

From nupt3
import { exportToPDF } from '#imports'

I understand that you use it as a phrase.
Can you tell me an example where I can put detailed options based on the jsPDF document?

Additional information

No response

`window is not defined` on SSR with Nuxt UI <UButton>

Environment

- Operating System: Darwin
- Node Version:     v21.6.1
- Nuxt Version:     3.11.2
- CLI Version:      3.11.1
- Nitro Version:    2.9.6
- Package Manager:  [email protected]
- Builder:          -
- User Config:      devtools, modules, routeRules, i18n
- Runtime Modules:  @nuxt/ui@^2.15.2, @nuxt/fonts@^0.6.1, @nuxtjs/[email protected], @sidebase/nuxt-pdf@^1.0.0-alpha.0
- Build Modules:    -

Reproduction

No response

Describe the bug

This works:

<button @click="exportToPDF('filename.pdf', pdfContent)">Create PDF</button>

This throws an error:

<UButton @click="exportToPDF('filename.pdf', pdfContent)">Create PDF</UButton>

On SSR it throws window is not defined from node_modules/jspdf/dist/jspdf.min.js:171:8032. When opening another page and then navigating to the page that contains the above code it works, e.g.:

• /pdf -> error
• /another-page -> /pdf -> works

Additional context

No response

Logs

No response

Btw. I wonder if this project is still maintained? According to #11 custom fonts dont work and pdf size is 8mb instead of 400kb.

Not working with extarnal image links

Environment

No response

Reproduction

Thanks for testing out nuxt-pdf!

print card

<script setup> import { exportToPDF } from "#imports"; const pdfSection = ref(null); </script>

Describe the bug

When i use image from cdn, it gives me a blank space after image

Additional context

No response

Logs

No response

link to quickstart documentation doesn't work (404)

Environment

No response

Reproduction

No response

Describe the bug

https://sidebase.io/nuxt-pdf/getting-started/quick-start -> 404

Additional context

No response

Logs

No response