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

Question

我有一个非常简单的 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 文件，其中只有单词 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>

Answer 1

jspdf 似乎无法将 svg 作为矢量图形添加到页面。共有三个选项：

使用 svg2pdf 而不是 jspdf 自行将 svg 转换为 pdf。
使用jspdf的addSvgAsImage功能手动在pdf页面中放置一个svg。
先把svg转成jpg，再用jspdf。

我选择了第三个选项并编写了一个函数，我运行在将 canvas 保存为 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">';
        });
    });
}

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

Error loading svg data with html2canvas and jspdf

html

javascript

printing

svg