html2canvas is not picking up chartjs correctly in the past breakpoint

25 views Asked by At

I'm using vue, chatjs and html2canvas. My project is responsive, but I'm passing the windowWidth with brealpoint so that the PDF has the same layout on any device. However, chartjs is responsive when generating the image, if I'm using a model device, the chart is completely disconfigured in the layout

What could I do to get around this? I was trying to change its width to "100%" but it widens

        html2canvas(document.querySelector('#page'), {
          ...options,
          onclone: async (clonedDoc) => {
            const graph = clonedDoc.getElementById('chartCanvas')

            if (graph) {
              graph.style.width = '100%'
              chart.update()
              graph.style.boxSizing = 'border-box'
            }
          },
        })
          .then((canvas) => {
            const canvasComMargens = document.createElement('canvas')
            const context = canvasComMargens.getContext('2d')
            const margin = 20
            canvasComMargens.width = canvas.width + margin * 2
            const aspectRatio = canvas.width / canvas.height
            canvasComMargens.height = canvasComMargens.width / aspectRatio
            context.fillStyle = '#e8f0fc'
            context.fillRect(0, 0, canvasComMargens.width, canvasComMargens.height)
            context.drawImage(canvas, margin, margin)

            const dataURL = canvasComMargens.toDataURL('image/jpeg')

            const pdf = new jsPDF('p', 'pt', 'A4')

            const img = new Image()
            img.src = dataURL

            img.onload = function () {
              const component = document.querySelector('#page')
              const componentWidth = component.offsetWidth
              const componentHeight = component.offsetHeight

              pdf.internal.pageSize.width = componentWidth
              pdf.internal.pageSize.height = componentHeight

              pdf.addImage(img, 'png', 2, 2, componentWidth, componentHeight)

              pdf.save(filename.pdf)
            }

I hope I have chartjs with the right size

0

There are 0 answers