如何使用html canvas将SVG图形导出为pdf_使用mPDF将HTML表导出为PDF_无法使用jspdf将html导出为pdf

文章/答案/技术大牛
发布
<!DOCTYPE html>
    <title>Export SVG to PDF using HTML Canvas</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.8.335/pdf.min.js"></script>
</head>
    <canvas id="canvas" width="500" height="500"></canvas>
    <button onclick="exportToPDF()">Export to PDF</button>
    <script>
        function exportToPDF() {
            // 获取SVG图形的内容
            var svgContent = document.getElementById('svg').innerHTML;
            // 创建Canvas元素
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');
            // 将SVG图形绘制到Canvas上
            var DOMURL = window.URL || window.webkitURL || window;
            var img = new Image();
            var svg = new Blob([svgContent], { type: 'image/svg+xml;charset=utf-8' });
            var url = DOMURL.createObjectURL(svg);
            img.onload = function () {
                ctx.drawImage(img, 0, 0);
                DOMURL.revokeObjectURL(url);
            img.src = url;
            // 将Canvas内容转换为DataURL
            var dataURL = canvas.toDataURL('image/png');
            // 创建PDF文档对象
            var doc = new jsPDF();
            // 将DataURL添加为图像
            doc.addImage(dataURL, 'PNG', 10, 10, 180, 180);
            // 保存PDF文档
            doc.save('export.pdf');
    </script>
</body>
</html>