vue中cytoscape.js绘制网络图导出成pdf

最新推荐文章于 2024-06-21 17:39:08 发布

weixin_44963143

最新推荐文章于 2024-06-21 17:39:08 发布

阅读量1.7k

点赞数

文章标签： vue canvas js javascript

本文链接：https://blog.csdn.net/weixin_44963143/article/details/106193234

版权

1.npm安装html2canvas npm install html2canvas

2.npm安装jspdf npm install jspdf --save

3.引入import cytoscape from 'cytoscape'

4.引入import html2canvas from 'html2canvas'

5.导出网络图为pdf

html2canvas(document.getElementById('cy')).then(
  function(canvas) {
    //返回图片URL，参数：图片格式和清晰度(0-1)
    var pageData = canvas.toDataURL('image/jpeg', 1.0);
    //方向默认竖直，尺寸ponits，格式a4【595.28,841.89]
    var pdf = new jsPDF('', 'pt', 'a4');
    //需要dataUrl格式
    pdf.addImage(pageData, 'JPEG', 0, 0, 595.28, 592.28/canvas.width * canvas.height );
    pdf.save('content.pdf');
  }
)