#Error in the NuxtPDF module

14 messages · Page 1 of 1 (latest)

viscid prism
# 
<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"

image.png image.png
ancient dust
#

Were you able to run any of their examples?

#

I mean these links from the playground - Minimal, Landscape, etc.

viscid prism
#

I couldn't, I tried to look through the documentation but the page that was supposed to be the documentation is getting a 404

ancient dust
#

I was able to run it, but only some of the links returned PDFs

#

Well.. actually, the last link "HTML To PDF (Legacy)" works

#

once you click "connect project" (some Stackblitz thing to pass through)

ancient dust
viscid prism
#

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>

this is my component responsible for the PDF

        <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