vue-html2pdf icon indicating copy to clipboard operation
vue-html2pdf copied to clipboard

On clone event not working

Open jonalxh opened this issue 3 years ago • 2 comments

Describe the bug I'm implemeting pdf export of documents in my website, everything used to work perfectly but now I need to show some buttons in the page and remove them when exported. To achieve it I've added a custom class to all the elements I need to remove and change and in the onclone method I'm doing some logic but it is not working, when exporting it enters to the method, but does nothing. This is my implementation:

<template>
<client-only>
      <vue-html2pdf
        :float-layout="false"
        :preview-modal="false"
        :enableDownload="true"
        :pdf-quality="2"
        :manual-pagination="true"
        pdf-orientation="portrait"
        :filename="userData.name"
        pdf-content-width="100%"
        ref="html2Pdf"
        :html-to-pdf-options="html2PdfOptions"
      >
           <section slot="pdf-content">
               ...
           </section>
      </vue-html2pdf>
</client-only>
<template>

<script>
export default {
    data() {
        return {
     html2PdfOptions: {
        enableLinks: true,
        filename: this.userData.name,
        margin: 0,
        image: {
          type: 'jpeg',
          quality: 1,
        },
        html2canvas: {
          useCORS: true,
          scrollX: -7,
          scrollY: 0,
          onclone: async (element) => {
            const wrapper = element.getElementById('wrapper')
            wrapper.classList.remove('shadow')
            wrapper.style.borderRadius = 0
            wrapper.style.margin = 0
            wrapper.style.padding = 0
            
            wrapper
              .querySelectorAll('.d-print-none')
              .forEach((item) => item.remove())

            wrapper
              .querySelectorAll('.header, .content, .left, .right')
              .forEach((item) => (item.style.borderRadius = 0))
          },
        },
        jsPDF: {
          format: 'ledger',
          floatPrecision: 'smart',
          orientation: 'portrait',
        },
        }
    },
    methods: {
        exportPDF() {
             this.$refs.html2Pdf.generatePdf()
        }
    }
}
</script>

Only the onclone is not working, the rest of the html2pdf options work as expected.

Package Version Latest (1.8.0)

Additional context I'm working with Nuxt in SSR mode, but I think this is not a problem because export to pdf is working, the only problem is that my code is not working to remove/alter the elements.

jonalxh avatar Jun 29 '21 20:06 jonalxh

I've tried printing the options in the @beforeDownload method and it gives me the following:

image

The complete Exception is:

TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
    at Function.r (<anonymous>:1:83)

jonalxh avatar Jun 29 '21 20:06 jonalxh

It looks like when :float-layout="false" PDF file is being generated from an origin (not cloned) element. Try this:

async exportPDF() {
        const wrapper = element.getElementById('wrapper')
        wrapper.classList.remove('shadow')
        await this.$refs.html2Pdf.generatePdf()
        wrapper.classList.add('shadow')
 }

LiNCH35 avatar Dec 10 '21 08:12 LiNCH35