文章/答案/技术大牛

发布

社区首页 >问答首页 >用html2canvas和jspdf加载svg数据时出错

问用html2canvas和jspdf加载svg数据时出错
EN

Stack Overflow用户

提问于 2021-10-08 09:56:29

回答 1查看 2.2K关注 0票数 0

我有一个非常简单的svg

<div id="printId">
    test
    <svg height="100" width="100">
        <circle cx="50" cy="50" r="40" />
    </svg> 
</div>

并试图用html2canvas和jspdf打印它。但无论我做什么我都会犯错

Error loading svg data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%22100%22%20width%3D%22100%22%20style%3D%22-webkit-writing-mode%3A%20horizontal-tb%3B%20-webkit-user-modify%3A%20read-only%3B%20-webkit-user-drag%3A%20auto%3B%20-web
Oe.error @ html2canvas-1.1.2.min.js:20

test.pdf文件中只有word test。

我在谷歌上搜索了大约3个小时，每个地方都有人推荐核团。就像你看到的，对我的案子没有帮助。我已经尽量简化了。下面是我使用的完整index.html：

<!DOCTYPE html>

<html>
    <head></head>
    <body>
    <div id="printId">
        test
        <svg height="100" width="100">
            <circle cx="50" cy="50" r="40" />
        </svg> 
    </div>

    <script src="../../../script/jsPDF/jspdf-2.3.1.umd.min.js" defer></script>
    <script src="../../../script/jsPDF/html2canvas-1.1.2.min.js" defer></script>
    <script>
        function saveAsPDF(divId, usersName, certNumber = '', type = 'old')
        {
        const { jsPDF } = window.jspdf;
        const pdf = new jsPDF();
        var source = document.getElementById("printId");

        pdf.html(
            source, {
            callback: function (pdf) {
                pdf.save("test.pdf");
            },
        });
        }
    </script>
    <input type='submit'
            onclick='saveAsPDF();'
            value='save'>
</body>
</html>

我还尝试了所有可能的html2canvas版本：

1.1.2

1.1.5

1.2.2

1.3.2

和两个版本的jspdf：

2.1.1

2.3.1

还有两种浏览器: Chrome和Opera。

我有什么问题？

编辑:我设法让html2canvas在下面的文档中独立工作。现在的问题是如何使它与jspdf一起工作：

<html>
    <head></head>
    <body>
            <div id="printId">
                this is circle:
            <svg height="100" width="100">
                <circle cx="50" cy="50" r="40" />
            </svg> 
            </div>
            <hr>
            <h4>Image of above HTML content...</h4>
            <div id="canvasImg"></div>

    <script src="../../../script/jsPDF/html2canvas-1.3.2.min.js"></script>
    <script>
        html2canvas(document.getElementById('printId')).then(function(canvas) {
            var canvasImg = canvas.toDataURL("image/jpg");
            document.getElementById('canvasImg').innerHTML = '<img src="'+canvasImg+'" alt="">';
        });
    </script>
</body>
</html>

svg

printing

javascript

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-10-08 13:38:15

看起来jspdf无法将svg作为矢量图形添加到页面中。有三种选择：

使用svg2pdf而不是jspdf自己将svg转换为pdf。
使用jspdf的addSvgAsImage函数手动将svg放在pdf页面中。
首先将svg转换为jpg，然后使用jspdf。

我选择了第三个选项，并编写了一个函数，在将画布保存为pdf之前运行该函数：

htmlToJpg: function()
{
    var canvas = document.querySelector('.to-print');
    screenWidth = parseFloat(window.getComputedStyle(canvas).width);

    var problematic = document.querySelectorAll('.convert-to-jpg');
    problematic.forEach(function(el) {
        html2canvas(el, 
            {
                scale: 2480/screenWidth // 2480px - size for A4 paper, 300 dpi
            }
        )
        .then(function(canvas) {
            var img = canvas.toDataURL("image/jpeg");
            el.innerHTML = '<img src="' + img + '" class="img">';
        });
    });
}

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69493988

复制

相似问题

问用html2canvas和jspdf加载svg数据时出错
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用html2canvas和jspdf加载svg数据时出错EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用html2canvas和jspdf加载svg数据时出错
EN