Skip to main content

Canvas to PDF — 使用 JavaScript 将 HTML5 Canvas 导出为 PDF

使用 JavaScript 将任意 HTML5 Canvas 内容导出为 PDF 文档。此演示展示了如何使用 jsPDF 将 Konva 舞台转换为可下载的 PDF 文件，并支持高质量渲染和可选中文本。

该方法分四个步骤：生成画布内容，将画布导出为图像，把图像插入 PDF 文档，然后保存。为了获得最佳效果，有两个提示：

高质量导出： 在将画布转换为图像时使用 pixelRatio 属性——详情请参见 高质量导出指南。

PDF 中的可选中文本： 尽管画布是作为图像添加的，你仍可以手动将文本节点插入其下方的 PDF 图层中。文本不会可见（因为它位于图像后面），但仍可被选择和搜索。PDF 中的文本渲染与 Konva 不同，因此复杂样式可能需要调整。

说明：查看下面的画布，然后点击按钮将其保存为 PDF。

import Konva from 'konva';

// 创建用于 PDF 导出的按钮
const saveButton = document.createElement('button');
saveButton.textContent = '保存为 PDF';
saveButton.style.position = 'absolute';
saveButton.style.top = '5px';
saveButton.style.left = '5px';
document.body.appendChild(saveButton);

// 创建舞台
const width = window.innerWidth;
const height = window.innerHeight;

const stage = new Konva.Stage({
  container: 'container',
  width: width,
  height: height,
});

const layer = new Konva.Layer();
stage.add(layer);

// 添加背景
const back = new Konva.Rect({
  width: stage.width(),
  height: stage.height(),
  fill: 'rgba(200, 200, 200)',
});
layer.add(back);

// 添加带模糊效果的文本
const text = new Konva.Text({
  text: '这是达斯·维达',
  x: 15,
  y: 40,
  rotation: -10,
  filters: [Konva.Filters.Blur],
  blurRadius: 4,
  fontSize: 18,
});
text.cache();
layer.add(text);

// 添加箭头
const arrow = new Konva.Arrow({
  points: [70, 50, 100, 80, 150, 100, 190, 100],
  tension: 0.5,
  stroke: 'black',
  fill: 'black',
});
layer.add(arrow);

// 添加图像
const imageUrl = 'https://konvajs.org/assets/darth-vader.jpg';
Konva.Image.fromURL(
  imageUrl,
  function (darthNode) {
    darthNode.setAttrs({
      x: 200,
      y: 50,
      scaleX: 0.5,
      scaleY: 0.5,
    });
    layer.add(darthNode);
  },
  function () {
    console.error('加载图像失败');
  }
);

// 处理 PDF 导出
saveButton.addEventListener('click', function () {
  // 我们需要检查 jsPDF 是否已加载
  if (typeof jsPDF !== 'undefined') {
    const pdf = new jsPDF('l', 'px', [stage.width(), stage.height()]);
    pdf.setTextColor('#000000');
    
    // 首先添加文本
    stage.find('Text').forEach((text) => {
      const size = text.fontSize() / 0.75; // 将像素转换为点
      pdf.setFontSize(size);
      pdf.text(text.text(), text.x(), text.y(), {
        baseline: 'top',
        angle: -text.getAbsoluteRotation(),
      });
    });

    // 然后在文本上绘制图像（使文本不可见）
    pdf.addImage(
      stage.toDataURL({ pixelRatio: 2 }),
      0,
      0,
      stage.width(),
      stage.height()
    );

    pdf.save('canvas.pdf');
  } else {
    console.error('jsPDF 库未加载。请将其包含在你的项目中。');
    alert('jsPDF 库未加载。在真实项目中，你需要将其包含进来。');
  }
});

// 动态加载 jsPDF 库以供演示
const script = document.createElement('script');
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js';
script.integrity = 'sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/';
script.crossOrigin = 'anonymous';
document.head.appendChild(script);
Open on CodeSandboxOpen Sandbox