如何在客户端将Vue页面转为矢量PDF？已试多方案未果

针对你的需求，推荐采用DOM转SVG再转PDF的方案，全程在客户端完成，且能保留矢量特性，同时解决你遇到的样式、弹窗问题：

核心依赖库 #

• dom-to-svg：将DOM节点（包括Vue组件）转换为矢量SVG，会自动提取元素的计算样式（解决Vite生产打包后样式丢失问题）
• svg2pdf.js：将SVG直接转换为矢量PDF

实现步骤 #

1. 安装依赖

npm install dom-to-svg svg2pdf.js jspdf

2. 在Vue组件中实现导出逻辑

import { domToSvg } from 'dom-to-svg';
import { svg2pdf } from 'svg2pdf.js';
import { jsPDF } from 'jspdf';

export default {
  methods: {
    async exportVectorPdf() {
      // 自定义弹窗确认（替换浏览器默认弹窗）
      if (!confirm('确认导出矢量PDF吗？')) return;

      // 获取目标Vue组件的DOM节点
      const targetEl = this.$el;

      // 将DOM转换为SVG（自动收集计算后的样式，适配Vite生产环境）
      const svg = await domToSvg(targetEl);

      // 将SVG转换为矢量PDF
      const doc = new jsPDF('p', 'mm', 'a4');
      await svg2pdf(svg, doc, {
        x: 0,
        y: 0,
        width: doc.internal.pageSize.getWidth(),
        height: doc.internal.pageSize.getHeight()
      });

      // 直接下载PDF
      doc.save('vue-page-vector.pdf');
    }
  }
}

针对你之前问题的优化点 #

• 替代window.print()：全程自定义交互（可自行实现更复杂的弹窗），无需依赖浏览器打印弹窗，避免Firefox事件兼容问题
• 解决生产环境样式丢失：dom-to-svg会遍历DOM节点并提取所有getComputedStyle结果，不受Vite CSS打包方式影响
• 保证矢量PDF：SVG本身是矢量格式，通过svg2pdf.js转换后生成的PDF保留矢量特性，不是图片型PDF

注意事项 #

• 如果组件中有动态内容（如异步加载的图片），需确保内容加载完成后再执行导出
• 复杂CSS特性（如渐变、滤镜）dom-to-svg大多支持，若遇到个别样式不兼容，可提前对目标DOM做临时样式适配

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