html2pdf.js on leaflet map missing some svgs or images

88 Views Asked by At

Images that have styles that are related to coordinates of them in the map don't show in the generated PDF. All of them have a transform: translate3d(233px, 283px, 0px); style. If I delete the style they show up in the PDF but in a wrong place. I think html2pdf has a problem with these styles.

When I use ctrl+p in Chrome it all works fine but the problem is that I can't get the blob of the map and send it to the server.

I tried to use another style instead of transform: translate3d() but it still didn't work. My packages are all the latest version. What else can i do?

Here's my implementation:

async MakePdf () {

      this.$q.loading.show({
        spinner: QSpinnerPie,
        color: 'indigo-10',
        delay: 400 // ms
      })

      const element = await document.getElementById('notebook-convert')

      const opt = {
        filename: 'File.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2, useCORS: true }, 
        jsPDF: { unit: 'in', format: 'A3', orientation: 
        this.orientation.value }
      }

      html2pdf().set(opt).from(element).save()
      const blob = await 
      html2pdf().set(opt).from(element).toPdf().output('blob')
      return blob
    },
0

There are 0 best solutions below