Nuxt•4mo ago

Error in the NuxtPDF module

<template>
    <UCard >
        <div class="h-full space-y-5">
            <div ref="pdfSection" class="bg-white h-full">
                <p class="text-gray-900">{{ props.data }}</p>
            </div>
            <UButton @click="createPDF(pdfSection as HTMLElement)" size="lg" label="Baixar PDF" block />
        </div>
    </UCard>
</template>
<script setup lang="ts">

const pdfSection = ref<HTMLElement | null>(null)

interface Props {
  data: any,
}

const props = defineProps<Props>()

const createPDF = (HTMLElement: HTMLElement) => {
    exportToPDF('pdf_protected_export.pdf', HTMLElement,
    {
      encryption: {
        ownerPassword: 'test',
        userPassword: 'test2',
        userPermissions: ['print']
      }
    }, {
      html2canvas: {
        scale: 0.7,
        useCORS: true
      }
    })

}
</script>

<template>
    <UCard >
        <div class="h-full space-y-5">
            <div ref="pdfSection" class="bg-white h-full">
                <p class="text-gray-900">{{ props.data }}</p>
            </div>
            <UButton @click="createPDF(pdfSection as HTMLElement)" size="lg" label="Baixar PDF" block />
        </div>
    </UCard>
</template>
<script setup lang="ts">

const pdfSection = ref<HTMLElement | null>(null)

interface Props {
  data: any,
}

const props = defineProps<Props>()

const createPDF = (HTMLElement: HTMLElement) => {
    exportToPDF('pdf_protected_export.pdf', HTMLElement,
    {
      encryption: {
        ownerPassword: 'test',
        userPassword: 'test2',
        userPermissions: ['print']
      }
    }, {
      html2canvas: {
        scale: 0.7,
        useCORS: true
      }
    })

}
</script>

I created this code based on the test environment present at "https://github.com/sidebase/nuxt-pdf/blob/main/playground/pages/client.vue"

5 Replies

Jacek•4mo ago

Were you able to run any of their examples? I mean these links from the playground - Minimal, Landscape, etc.

FoxForGateOP•4mo ago

I couldn't, I tried to look through the documentation but the page that was supposed to be the documentation is getting a 404 https://sidebase.io/nuxt-pdf/getting-started/quick-start

Jacek•4mo ago

I was able to run it, but only some of the links returned PDFs stackblitz.com/edit/nuxt-pdf-playground-running - download and run locally. It starts on Stackblitz but links don't really work there. Well.. actually, the last link "HTML To PDF (Legacy)" works once you click "connect project" (some Stackblitz thing to pass through) Waybackmachine might help: https://web.archive.org/web/20240221220521/https://sidebase.io/nuxt-pdf/getting-started/quick-start

FoxForGateOP•4mo ago

I took a better look at the error and looked in the module files to see how it works, the problem is that it works with "jspdf" which does not support the use of SSR, which caused it to try to manipulate information that is part of of the client, in this case the HTMLElement. To resolve this error, I created an isolated component to work only with my PDF and the html related to it and when using it I placed it inside a "ClientOnly" thus resolving the error in question

<template>
    <UCard >
        <div class="h-full space-y-5">
            <div ref="pdfSection" class="bg-white h-full">
                <p class="text-gray-900">{{ props.data }}</p>
            </div>
            <UButton @click="createPDF(pdfSection as HTMLElement)" size="lg" label="Baixar PDF" block />
        </div>
    </UCard>
</template>
<script setup lang="ts">

const pdfSection = ref<HTMLElement | null>(null)

interface Props {
  data: any,
}

const props = defineProps<Props>()

const createPDF = async(HTMLElement: HTMLElement) => {
  if(HTMLElement){
    exportToPDF('pdf_protected_export.pdf', HTMLElement,
    {
      encryption: {
        ownerPassword: 'test',
        userPassword: 'test2',
        userPermissions: ['print']
      }
    }, {
      html2canvas: {
        scale: 0.7,
        useCORS: true
      }
    })
  }

}
</script>

<template>
    <UCard >
        <div class="h-full space-y-5">
            <div ref="pdfSection" class="bg-white h-full">
                <p class="text-gray-900">{{ props.data }}</p>
            </div>
            <UButton @click="createPDF(pdfSection as HTMLElement)" size="lg" label="Baixar PDF" block />
        </div>
    </UCard>
</template>
<script setup lang="ts">

const pdfSection = ref<HTMLElement | null>(null)

interface Props {
  data: any,
}

const props = defineProps<Props>()

const createPDF = async(HTMLElement: HTMLElement) => {
  if(HTMLElement){
    exportToPDF('pdf_protected_export.pdf', HTMLElement,
    {
      encryption: {
        ownerPassword: 'test',
        userPassword: 'test2',
        userPermissions: ['print']
      }
    }, {
      html2canvas: {
        scale: 0.7,
        useCORS: true
      }
    })
  }

}
</script>

this is my component responsible for the PDF

        <ClientOnly>
            <PerfilPreviewCurriculo :data="data"/>
        </ClientOnly>

        <ClientOnly>
            <PerfilPreviewCurriculo :data="data"/>
        </ClientOnly>

and in this way I use it this was the only way to use it, I believe there is some part of the code that when using "exportToPDF" tries to manipulate something on the client, without checking whether the process is occurring on the client side Later I will fork the original project and try to fix this problem, but I don't know if the fix will be implemented because analyzing the project's github it is inactive

Jacek•4mo ago

That's a shame... I wished to use something that does not require full-blown Puppeteer

Gaming

Programming

Error in the NuxtPDF module

Did you find this page helpful?