把vue页面中展示的UI和图表导出为pdf或者图片

news2024/9/20 16:49:13

在 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(); // 渲染为图片