在 Vue 项目中，将页面中展示的 UI 和图表导出为 PDF 或图片可以使用以下几种方案，涉及一些专用的库和框架。下面是几种常见的方法：
1. html2canvas + jsPDF
这是一种常见的组合，先将页面的 UI 转换为图片，然后导出为 PDF。
- html2canvas：将 DOM 元素渲染为图片（canvas）。
- jsPDF：用于生成 PDF 文件。
实现步骤：
- 安装依赖：
npm install html2canvas jspdf
- 示例代码：
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';export default {methods: {exportToPdf() {const element = document.getElementById('export-content'); // 要导出的 DOM 元素html2canvas(element).then((canvas) => {const imgData = canvas.toDataURL('image/png');const pdf = new jsPDF('p', 'mm', 'a4');const imgWidth = 210; // PDF 页面的宽度（单位：mm）const imgHeight = (canvas.height * imgWidth) / canvas.width; // 根据图片比例调整高度pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);pdf.save('download.pdf'); // 下载 PDF});}}
};
注意：
- html2canvas 可以渲染大部分的 DOM 元素，但对某些 CSS 可能不完全支持（如动态内容、部分伪元素等）。
- 如果图表使用的是 Canvas 图像（如 ECharts），html2canvas 可以直接处理它。
2. dom-to-image
这个库可以将 DOM 元素转换为图片，也可以结合 jsPDF 导出为 PDF。
- 安装依赖：
npm install dom-to-image jspdf
- 示例代码：
import domtoimage from 'dom-to-image';
import jsPDF from 'jspdf';export default {methods: {exportToPdf() {const element = document.getElementById('export-content'); // 要导出的 DOM 元素domtoimage.toPng(element).then((dataUrl) => {const pdf = new jsPDF();const img = new Image();img.src = dataUrl;pdf.addImage(img, 'PNG', 0, 0, 210, 297); // A4 大小pdf.save('download.pdf');});}}
};
特点：
- dom-to-image 支持更多 CSS 特性，生成的图片质量较好。
- 它支持导出为多种格式，如 PNG、SVG 等。
3. pdf-lib (高级 PDF 操作)
如果你需要更复杂的 PDF 处理，比如分割页面、添加页码或多页支持，可以考虑 pdf-lib，它是一个强大的 PDF 操作库。
- 官方网站：pdf-lib
- 这个库可以和
html2canvas或dom-to-image搭配使用，生成 PDF 时可以实现更多自定义功能。
4. Canvg（处理 Canvas 图表）
如果页面中包含 Canvas 类型的图表（如 ECharts、Chart.js 等），可以使用 canvg 将 Canvas 图表转换为 SVG，再导出为图片或 PDF。
- 安装依赖：
npm install canvg
- 示例代码：
import { Canvg } from 'canvg';const canvas = document.getElementById('myChartCanvas');
const ctx = canvas.getContext('2d');
const svgString = ctx.toSvg(); // 将 Canvas 转换为 SVG
const svg = new Canvg(ctx);
svg.render(); // 渲染为图片
5. 直接使用后端服务生成 PDF
如果对前端生成的 PDF 或图片效果不满意，或者生成 PDF 的内容较多较复杂，可以考虑在后端使用工具如 Puppeteer 或 wkhtmltopdf 来生成 PDF。这些工具可以模拟浏览器渲染页面，生成更高质量的 PDF。
- Puppeteer：这是一个无头浏览器，可以通过编程自动生成 PDF。可以通过 API 把 Vue 的渲染内容传递到后端生成。
总结
- html2canvas + jsPDF 是最简单的解决方案，适合大多数页面导出。
- dom-to-image 支持更多的 CSS，但性能可能稍慢。
- 如果对 PDF 质量要求较高或者页面内容复杂，可以考虑使用 Puppeteer 或其他后端工具配合。