多SVG格式FusionCharts XT图表导出为PDF方案咨询

我刚好处理过类似的场景，给你分享一个能直接运行的多SVG导出PDF的实现方案，包含完整的代码示例，你可以直接在浏览器里测试：

核心思路 #

因为每个FusionCharts渲染出的SVG都是独立的DOM元素，我们只需要：

1. 获取页面中所有图表的SVG节点
2. 依次将每个SVG转换为PDF内容，添加到文档中
3. 处理好分页和布局，保证图表完整显示

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
    <title>多SVG图表导出PDF示例</title>
    <!-- 引入依赖库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/svg2pdf.js/2.2.0/svg2pdf.min.js"></script>
    <!-- 这里请引入你的FusionCharts库 -->
</head>
<body>
    <!-- 示例图表容器，替换成你实际的图表容器 -->
    <div id="chart1" class="fusioncharts-container"></div>
    <div id="chart2" class="fusioncharts-container"></div>
    <div id="chart3" class="fusioncharts-container"></div>

    <button onclick="exportAllChartsToPDF()">导出所有图表为PDF</button>

    <script>
        // 这里添加你的FusionCharts图表初始化代码
        // 比如：
        // FusionCharts.ready(function() {
        //     new FusionCharts({...}).render();
        //     new FusionCharts({...}).render();
        // });

        async function exportAllChartsToPDF() {
            // 初始化PDF文档，纵向A4页面
            const { jsPDF } = window.jspdf;
            const doc = new jsPDF('p', 'mm', 'a4');
            
            // 获取页面尺寸（单位：mm）
            const pageWidth = doc.internal.pageSize.getWidth();
            const pageHeight = doc.internal.pageSize.getHeight();
            let currentY = 20; // 页面顶部留20mm边距

            // 获取所有图表的SVG元素（根据你的实际容器类名调整选择器）
            const chartSvgs = document.querySelectorAll('.fusioncharts-container svg');

            for (const svg of chartSvgs) {
                // 克隆SVG节点，避免修改原页面的图表
                const clonedSvg = svg.cloneNode(true);
                
                // 计算SVG的自适应尺寸：宽度适配页面（左右各留10mm边距），高度按比例缩放
                const originalWidth = svg.getBBox().width;
                const originalHeight = svg.getBBox().height;
                const targetWidth = pageWidth - 20;
                const targetHeight = (originalHeight / originalWidth) * targetWidth;

                // 检查当前页面剩余空间是否足够放下图表，不够则分页
                if (currentY + targetHeight + 15 > pageHeight) {
                    doc.addPage();
                    currentY = 20; // 新页面重新从顶部边距开始
                }

                // 将SVG转换为PDF并添加到文档
                await svg2pdf(clonedSvg, doc, {
                    x: 10, // 左边距10mm
                    y: currentY,
                    width: targetWidth,
                    height: targetHeight
                });

                // 更新当前Y坐标，加上图表高度和15mm的间距
                currentY += targetHeight + 15;
            }

            // 保存PDF文件
            doc.save('多图表导出结果.pdf');
        }
    </script>
</body>
</html>

关键细节说明 #

• 克隆SVG节点：直接操作原SVG可能会影响页面上的图表显示，克隆后处理更安全。
• 自适应布局：自动将图表缩放到页面宽度内，保持原比例，避免图表超出PDF页面范围。
• 自动分页：当当前页面剩余空间不足以容纳下一个图表时，自动创建新页面，保证图表完整展示。
• 异步处理：svg2pdf的转换是异步操作，使用async/await确保每个图表都处理完成后再继续下一个。

注意事项 #

1. 确保图表完全渲染完成后再调用导出函数：可以在FusionCharts的renderComplete事件中触发导出，或者给按钮添加适当的延迟，避免获取到不完整的SVG内容。
2. 处理外部资源：如果SVG中包含外部字体、图片等资源，需要确保这些资源能被PDF正确加载（比如使用内联资源）。
3. 调整选择器：根据你实际的FusionCharts容器类名调整document.querySelectorAll的选择器，确保能正确获取到所有图表的SVG元素。

内容的提问来源于stack exchange，提问作者Envee_NV