vue echart 打印

在Vue中使用ECharts进行打印时，可以通过ECharts提供的getDataURL方法获取图表的Base64图片URL，然后使用浏览器的打印API进行打印。以下是一个简单的示例：

1. 首先，确保你已经在Vue项目中安装并配置了ECharts

2. 在你的Vue组件中，创建一个方法来处理打印逻辑.

<template>
  <div>
    <v-chart :options="chartOptions" ref="echart" />
    <button @click="printChart">打印图表</button>
  </div>
</template>
 
<script>
import ECharts from 'vue-echarts';
 
export default {
  components: {
    'v-chart': ECharts
  },
  data() {
    return {
      chartOptions: {
        // ECharts 配置项
      }
    };
  },
  methods: {
    printChart() {
      const chart = this.$refs.echart.echart; // 获取ECharts实例
      const imgUrl = chart.getDataURL({
        // 导出图表的格式、质量和尺寸
        type: 'png',
        pixelRatio: 2,
        backgroundColor: '#fff',
        excludeComponents: ['toolbox']
      });
 
      // 创建一个临时的iframe用于打印
      const iframe = document.createElement('iframe');
      iframe.style.visibility = 'hidden';
      iframe.style.height = '0px';
      iframe.style.width = '0px';
      document.body.appendChild(iframe);
 
      // 等iframe加载完成后打印
      iframe.onload = function() {
        const contentWindow = iframe.contentWindow;
        const document = contentWindow.document;
        document.open();
        document.write('<img src="' + imgUrl + '" />'); // 将图表的Base64图片插入iframe
        document.close();
        contentWindow.focus();
        contentWindow.print(); // 执行打印命令
        document.body.removeChild(iframe); // 打印后移除iframe
      };
 
      iframe.src = 'about:blank'; // 触发iframe的加载
    }
  }
};
</script>

在上述代码中，printChart方法首先通过ECharts实例的getDataURL方法获取图表的Base64图片URL。然后，它创建一个隐藏的iframe，将图表的Base64图片URL作为一个img标签插入到iframe中，并触发打印命令。打印完成后，iframe会被移除。这样就可以实现在Vue中使用ECharts并打印图表的功能。