vue-html2pdf
vue-html2pdf copied to clipboard
On clone event not working
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.
I've tried printing the options in the @beforeDownload method and it gives me the following:
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)
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')
}