在Angular 12中如何将Cytoscape.js生成的图表导出为PDF？

要在Angular 12项目中实现Cytoscape.js图表导出为PDF，可借助jsPDF库结合Cytoscape已有的图片导出能力完成，具体步骤如下：

1. 安装jsPDF依赖 #

先在项目中安装jsPDF：

npm install jspdf --save

2. 修改导出逻辑 #

在现有导出代码基础上，新增PDF导出分支。先将Cytoscape图表转为PNG的base64格式，再通过jsPDF把图片添加到PDF文档中：

// 导入jsPDF
import jsPDF from 'jspdf';

// 导出函数
exportGraph(downloadAs: string) {
  if(downloadAs == 'JSON'){
    var jsonBlob = new Blob([ JSON.stringify( this.cy.json() ) ], { type: 'application/javascript;charset=utf-8' });
    saveAs( jsonBlob, 'graph.json' );
  }
  else if(downloadAs == 'png'){
    saveAs(this.cy.png({bg: 'white'}), "graph.png");
  }
  else if(downloadAs == 'jpg'){
    saveAs(this.cy.jpg({bg: 'white'}), "graph.jpg");
  }
  else if(downloadAs == 'pdf'){
    // 获取完整图表的PNG base64数据，full参数避免视口裁剪
    const pngBase64 = this.cy.png({ bg: 'white', full: true });
    // 根据图表实际宽高创建PDF实例，设置横向布局
    const pdf = new jsPDF('landscape', 'px', [this.cy.width(), this.cy.height()]);
    // 将图片添加到PDF画布
    pdf.addImage(pngBase64, 'PNG', 0, 0, this.cy.width(), this.cy.height());
    // 保存PDF文件
    pdf.save('graph.pdf');
  }
}

关键说明 #

• full: true参数：确保导出完整图表，不会因容器视口限制导致部分内容被裁剪。
• 尺寸匹配：PDF的画布尺寸与图表实际宽高一致，保证图片完整显示。
• 扩展功能：如果需要给PDF添加标题、分页或其他元素，可调用jsPDF的text()、addPage()等API实现。

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