1

svg it is rendered perfectly in HTML, but when I download it is not rendering properly. why?

in html enter image description here

in PDF enter image description here

Code

function saveAsPDF() {
            var element = document.getElementById('printableArea');
            var opt = {
                margin: 0.3,
                filename: 'download.pdf',
                image: {type: 'jpeg', quality: 1},
                html2canvas: {scale: 4, dpi: 72, letterRendering: true},
                jsPDF: {unit: 'in', format: 'A2'},
                html2canvas: {
                    onclone: (element) => {
                        const svgElements = Array.from(element.querySelectorAll('svg'));
                        svgElements.forEach(s => {
                            const bBox = s.getBBox();
                            s.setAttribute("x", bBox.x);
                            s.setAttribute("y", bBox.y);
                            s.setAttribute("width", bBox.width);
                            s.setAttribute("height", bBox.height);
                        })
                    }
                }
            };
            html2pdf().set(opt).from(element).save();
        }
        

  • Does this rendering result appear in every browser? E.g. safari has some [known rendering issues](https://stackoverflow.com/questions/69949555/convert-svg-with-image-not-working-in-safari) that could be solved by adding some delay before drawing the svg to canvas. – herrstrietzel Dec 28 '21 at 15:54
  • how could it be done? – developer3 onecity Dec 29 '21 at 06:06
  • It really depends on your actual svg/html/css code. So please provide a stripped down code example via SO's snippet feature – if your code is too complex: just share a jsfiddle or codepen link (or similar coding platform links). If your pdf rendering issue is browser specific – please add those insights to your question/description (e.g. wether everything is fine in firefox, but screwed up in chromium based browsers). – herrstrietzel Dec 31 '21 at 00:48

0 Answers0