Vue中用vue-echarts时，如何强制ECharts打印时固定宽度？

我明白你遇到的麻烦了——开启autoresize="true"后，打印时图表会跟着浏览器窗口宽度走，全屏状态下就会被裁剪，而且你写的打印样式还不生效。这主要是因为vue-echarts的自动 resize 机制会在打印触发的窗口 resize 事件中重新计算内部容器的宽度，直接覆盖了你设置的CSS样式。

下面给你几个可行的解决方案：

方案1：打印前临时禁用自动resize，打印后恢复 #

这种方法是最可靠的，从根源上阻止自动调整干扰打印布局：

首先给你的vue-echarts组件添加ref（如果是多个图表，可以用数组形式的ref）：

<v-chart ref="chartRef" :autoresize="true" ...></v-chart>

然后在打印触发的方法里处理：

async handlePrint() {
  // 遍历所有图表，禁用自动resize并手动设置打印宽度
  this.$refs.chartRef.forEach(chart => {
    // 关闭组件的autoresize属性
    chart.$props.autoresize = false;
    // 获取echarts实例，手动设置目标宽度
    const echartsInstance = chart.getEchartsInstance();
    echartsInstance.resize({ width: '600px' });
  });

  // 等待DOM更新完成
  await this.$nextTick();

  // 触发打印
  window.print();

  // 打印完成后恢复自动resize，适配浏览器窗口
  setTimeout(() => {
    this.$refs.chartRef.forEach(chart => {
      chart.$props.autoresize = true;
      const echartsInstance = chart.getEchartsInstance();
      echartsInstance.resize();
    });
  }, 500); // 延迟确保打印流程完成
}

方案2：用高优先级CSS强制覆盖内部容器样式 #

如果不想修改JS逻辑，可以尝试用更精确的CSS选择器覆盖vue-echarts生成的内部容器的内联样式：

@media print {
  @page { margin: 1cm }
  body { 
    width: 110mm; 
    height: 297mm; 
    margin: 25mm; 
  }
  /* 直接选中vue-echarts内部的动态容器，强制设置宽度 */
  .echarts > div[style*="position: relative"] {
    width: 600px !important;
    max-width: 100% !important; /* 防止超出打印页面边界 */
  }
  .echarts {
    width: 600px !important;
    max-width: 100% !important;
  }
}

这里用属性选择器[style*="position: relative"]精准定位到内部的动态容器，再用!important强制覆盖它的内联宽度样式。

方案3：监听浏览器打印事件自动处理 #

如果是通过浏览器自带的打印按钮触发打印，可以监听beforeprint和afterprint事件来自动处理：

mounted() {
  // 绑定打印前后的事件监听
  window.addEventListener('beforeprint', this.handleBeforePrint);
  window.addEventListener('afterprint', this.handleAfterPrint);
},
beforeDestroy() {
  // 组件销毁前移除监听，避免内存泄漏
  window.removeEventListener('beforeprint', this.handleBeforePrint);
  window.removeEventListener('afterprint', this.handleAfterPrint);
},
methods: {
  async handleBeforePrint() {
    // 打印前禁用自动resize并设置宽度
    this.$refs.chartRef.forEach(chart => {
      chart.$props.autoresize = false;
      const echartsInstance = chart.getEchartsInstance();
      echartsInstance.resize({ width: '600px' });
    });
    await this.$nextTick();
  },
  handleAfterPrint() {
    // 打印后恢复自动resize
    setTimeout(() => {
      this.$refs.chartRef.forEach(chart => {
        chart.$props.autoresize = true;
        const echartsInstance = chart.getEchartsInstance();
        echartsInstance.resize();
      });
    }, 500);
  }
}

为什么原来的CSS无效？ #

因为vue-echarts的autoresize会监听窗口的resize事件，而浏览器在触发打印时会模拟一次窗口resize（用来适配打印预览的尺寸），这时候组件会重新计算内部容器的宽度，直接覆盖了你在@media print里设置的样式。所以必须先禁用自动resize，或者用更高优先级的CSS强制覆盖动态生成的内联样式。

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