如何将Cytoscape图导出为无模糊PDF？解决jsPDF转换模糊问题

阿华AIGC实验室

2026-5-21

解决Cytoscape图转PDF模糊问题的可行方案

我之前也踩过这个坑！用Cytoscape导出位图再转PDF，确实容易出现缩小后模糊的问题——毕竟位图的分辨率是固定的，缩放后自然会失真。这里有几个亲测有效的解决方案，能帮你生成无模糊的PDF：

方案一：直接用SVG转PDF（最推荐）

Cytoscape支持导出SVG矢量图，矢量图本身是无损缩放的，转PDF后放大多少都不会糊。步骤如下：

首先从Cytoscape导出完整的SVG内容：

const cy = cytoscape({ /* 你的图实例配置 */ });
// full: true 确保导出整个图，包括超出视口的部分
const svgContent = cy.svg({ full: true });

然后用jsPDF的SVG插件直接将SVG添加到PDF中（需要先安装jspdf-plugin-svg依赖）：

import jsPDF from 'jspdf';
import 'jspdf-plugin-svg';

const doc = new jsPDF();
// 参数分别是SVG内容、x坐标、y坐标、宽度、高度（0表示按比例自适应）
doc.addSVG(svgContent, 10, 10, 190, 0);
doc.save('cytoscape-graph.pdf');

这个方法生成的PDF完全是矢量级别的清晰度，是最优解。

方案二：导出高分辨率位图再转PDF

如果因为某些原因必须使用位图（比如SVG渲染有样式兼容问题），可以通过提高导出位图的分辨率来解决模糊问题：

用Cytoscape的png()方法设置scale参数，导出几倍于原尺寸的高分辨率PNG：
```
cy.png({ scale: 3, full: true }).then(imgData => {
  // 后续处理逻辑
});
```
scale:3表示导出的图片是原尺寸的3倍，分辨率足够支撑PDF缩放后的清晰度，你可以根据需求调整这个值（一般2-4就够）。

然后将高分辨率图片添加到PDF时，按比例缩小到页面尺寸，避免被压缩：

const doc = new jsPDF();
const img = new Image();
img.src = imgData;
img.onload = () => {
  // 让图片宽度适配A4页面（减去左右边距各10mm）
  const targetWidth = doc.internal.pageSize.getWidth() - 20;
  const scaleRatio = targetWidth / img.width;
  const targetHeight = img.height * scaleRatio;
  doc.addImage(imgData, 'PNG', 10, 10, targetWidth, targetHeight);
  doc.save('cytoscape-graph.pdf');
};