Vue3 + Amcharts5使用内置导出菜单导出PDF时出错求助

问题背景 #

在Vue 3.2.36项目中使用AmCharts 5.3.4创建饼图，点击导出菜单的PDF选项时控制台报错，查看Exporting.ts文件发现相关异常，已查阅资料未找到解决方案。

技术版本 #

• Vue: v3.2.36
• Amcharts: v5.3.4

代码示例 #

<template>
    <div class="hello" ref="pie_chart_share_revenue" />
</template>

<script>
import * as am5 from '@amcharts/amcharts5';
import * as am5percent from '@amcharts/amcharts5/percent';
import am5themes_Animated from '@amcharts/amcharts5/themes/Animated';
import * as am5plugins_exporting from "@amcharts/amcharts5/plugins/exporting";

export default {
    props: {
        categories: Array,
    },
    data() {
        return {
            mainChart: null
        }
    },
    mounted() {
        let root = am5.Root.new(this.$refs.pie_chart_share_revenue);
        root.numberFormatter.set("numberFormat", "#,###.00");
        root.setThemes([am5themes_Animated.new(root)]);

        let chart = root.container.children.push(
            am5percent.PieChart.new(root, {
                layout: root.verticalHorizontal
            })
        );

        // Define data
        let data = this.categories;

        // Create series
        let series = chart.series.push(
            am5percent.PieSeries.new(root, {
                name: "Share revenue",
                valueField: "value",
                categoryField: "label",
                tooltip: am5.Tooltip.new(root, {
                    labelText: "[bold]{category}[/]\n{value.formatNumber()}"
                })
            })
        );

        series.data.setAll(data);

        let title = chart.children.unshift(am5.Label.new(root, {
            text: "Categories share of revenue",
            fontSize: 24,
            textAlign: "center",
            width: am5.p100,
            visible: false
        }));

        let exporting = am5plugins_exporting.Exporting.new(root, {
            menu: am5plugins_exporting.ExportingMenu.new(root, {}),
            filePrefix: "Categories share of revenue",
            title: "Categories share of revenue"
        });

        exporting.events.on("exportstarted", function() {
            title.show(0);
        });

        exporting.events.on("exportfinished", function() {
            title.hide(0);
        });

        series.appear();
        chart.appear();

        this.mainChart = root;
    },
    beforeDestroy() {
        if (this.mainChart) {
            this.mainChart.dispose();
        }
    },
}
</script>

<style scoped>
.hello {
    width: 100%;
    height:500px;
}
</style>

解决方案 #

1. 补全导出依赖包 #

AmCharts 5的PDF导出依赖jspdf和html2canvas，需手动安装：

npm install jspdf html2canvas --save

安装后无需额外引入，AmCharts导出插件会自动调用这两个依赖。

2. 显式配置PDF导出参数 #

尝试添加pdfOptions配置，避免默认参数冲突：

let exporting = am5plugins_exporting.Exporting.new(root, {
    menu: am5plugins_exporting.ExportingMenu.new(root, {}),
    filePrefix: "Categories share of revenue",
    title: "Categories share of revenue",
    pdfOptions: {
        format: "a4",
        orientation: "portrait"
    }
});

3. 调整版本兼容性 #

当前AmCharts 5.3.4可能存在导出插件的已知bug，尝试升级到稳定版本：

npm update @amcharts/amcharts5 @amcharts/amcharts5/plugins/exporting

或降级到5.2.x系列等验证过的稳定版本测试。

4. 捕获详细错误信息 #

添加导出失败事件监听，获取具体报错原因：

exporting.events.on("exportfailed", (ev) => {
    console.error("导出失败详情：", ev.error);
});

根据错误信息定位问题，比如DOM元素渲染异常、依赖加载失败等。

5. 调整DOM可见性处理逻辑 #

暂时注释导出时的标题显隐逻辑，测试是否能正常导出：

// exporting.events.on("exportstarted", function() {
//     title.show(0);
// });

// exporting.events.on("exportfinished", function() {
//     title.hide(0);
// });

若注释后恢复正常，说明动画切换导致DOM状态异常，改用非动画方式控制可见性：

exporting.events.on("exportstarted", function() {
    title.set("visible", true);
});

exporting.events.on("exportfinished", function() {
    title.set("visible", false);
});

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