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