如何在Vue中获取PrimeVue Chart的Chart构造函数调用toBase64Image？

你遇到的核心问题有两个：一是混淆了PrimeVue封装的Chart组件和原生Chart.js的构造函数，二是toBase64Image是Chart实例的方法，不是静态方法，不能直接通过构造函数调用。

具体修正步骤： #

1. 区分导入的模块
   PrimeVue的Chart是封装后的Vue组件，而你需要的Chart.js原生构造函数要从chart.js单独导入，为避免命名冲突，可以给PrimeVue的组件重命名：

   import PrimeChart from 'primevue/chart'; // 重命名PrimeVue组件
   import { Chart } from 'chart.js'; // 导入原生Chart.js构造函数
   import ChartDataLabels from 'chartjs-plugin-datalabels';
   import { ref } from 'vue';
   import { ChartData } from 'chart.js';
   

2. 获取PrimeVue Chart的实例引用
   在setup中定义ref用来绑定组件实例，后续通过它拿到内部的Chart.js实例：

   const chartRef = ref<InstanceType<typeof PrimeChart> | null>(null);
   

3. 正确调用toBase64Image方法
   在animation.onComplete回调中，通过ref获取组件实例后，访问其暴露的chart属性（原生Chart.js实例），再调用实例方法：

   const options = ref({
     plugins: {
       datalabels: {
         labels: {
           title: {
             color: 'black',
           },
         },
         align: 'end',
         anchor: 'start',
         offset: 1,
         formatter
       }
     },
     aspectRatio: props.aspectRatio,
     animation: {
       onComplete: () => {
         if (chartRef.value?.chart) {
           const base64Chart = chartRef.value.chart.toBase64Image();
           // 此处可使用base64格式的图表数据，比如用于打印或保存
           console.log(base64Chart);
         }
       }
     }
   });
   

4. 更新模板中的组件引用
   将模板里的组件标签改为重命名后的PrimeChart，并绑定ref：

   <template>
     <section class="config-asset-chart">
       <span>{{ title }}</span>
       <PrimeChart
         ref="chartRef"
         class="px-2"
         :data="data"
         :width="props.printWidth"
         :height="props.printHeight"
         :options="options"
         :plugins="[ChartDataLabels]"
       />
     </section>
   </template>
   

关键说明： #

• PrimeVue的Chart组件内部会初始化原生Chart.js实例，并通过chart属性对外暴露，必须通过组件ref才能访问到这个实例。
• toBase64Image()是实例方法，只能在已初始化的Chart实例上调用，不能直接通过构造函数调用。

内容的提问来源于stack exchange，提问作者May W.