使用jsPDF将SVG保存为PDF时内容为空的解决方法

方案1：将SVG转为Data URL后传入 #

addSvgAsImage 无法直接处理纯XML字符串，需将SVG转为Data URL格式，同时改用addImage方法并指定SVG格式：

const downloadPDF = (goJSDiagram) => {
  const svg = goJSDiagram.makeSvg({scale: 1, background: "white"});
  const svgStr = new XMLSerializer().serializeToString(svg);
  // 转为带编码的Data URL
  const svgDataUrl = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgStr)}`;
  const pdfDoc = new jsPDF();
  pdfDoc.addImage(svgDataUrl, 'SVG', 0, 0, pdfDoc.internal.pageSize.width, pdfDoc.internal.pageSize.height);
  pdfDoc.save(props.model[0].cName?.split(" (")[0] + ".pdf");
}

方案2：通过Canvas中转（兼容性更强） #

如果SVG包含复杂样式、渐变或外部资源，转为Canvas再生成图片的方式更可靠：

const downloadPDF = async (goJSDiagram) => {
  const svg = goJSDiagram.makeSvg({scale: 1, background: "white"});
  const svgStr = new XMLSerializer().serializeToString(svg);
  
  // 创建Canvas并加载SVG
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const img = new Image();
  
  await new Promise((resolve) => {
    img.onload = resolve;
    img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgStr)}`;
  });
  
  // 匹配Canvas与SVG尺寸并绘制
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
  
  // 将Canvas转为图片添加到PDF
  const canvasDataUrl = canvas.toDataURL('image/png');
  const pdfDoc = new jsPDF();
  const pageWidth = pdfDoc.internal.pageSize.width;
  const pageHeight = pdfDoc.internal.pageSize.height;
  // 按页面尺寸等比缩放
  const scale = Math.min(pageWidth / canvas.width, pageHeight / canvas.height);
  const x = (pageWidth - canvas.width * scale) / 2;
  const y = (pageHeight - canvas.height * scale) / 2;
  
  pdfDoc.addImage(canvasDataUrl, 'PNG', x, y, canvas.width * scale, canvas.height * scale);
  pdfDoc.save(props.model[0].cName?.split(" (")[0] + ".pdf");
}

方案3：补全SVG命名空间 #

若goJS生成的SVG缺少根节点命名空间，手动添加可修复解析问题：

const downloadPDF = (goJSDiagram) => {
  const svg = goJSDiagram.makeSvg({scale: 1, background: "white"});
  // 检查并添加SVG命名空间
  if (!svg.hasAttribute('xmlns')) {
    svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
  }
  const svgStr = new XMLSerializer().serializeToString(svg);
  const svgDataUrl = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgStr)}`;
  const pdfDoc = new jsPDF();
  pdfDoc.addImage(svgDataUrl, 'SVG', 0, 0, pdfDoc.internal.pageSize.width, pdfDoc.internal.pageSize.height);
  pdfDoc.save(props.model[0].cName?.split(" (")[0] + ".pdf");
}

内容的提问来源于stack exchange，提问作者this.srivastava