D3组织架构图导出A0尺寸PDF模糊问题求助

模糊的核心原因 #

• 位图转PDF的固有局限：你当前用exportImg把图表转成JPEG位图再塞进PDF，位图是固定像素数量的，放大到A0（1189mm×841mm）这种大尺寸时，像素密度不足以支撑清晰显示，必然模糊。调整pixelRatio无效，大概率是因为d3-orgchart的exportImg方法对该参数的支持存在局限，生成的位图原始分辨率并未真正提升。
• JPEG压缩损耗：JPEG格式本身带有损压缩，会进一步降低图像清晰度。

最优方案：直接导出SVG到PDF #

SVG是矢量格式，放大不会失真，是这类图表导出的首选方案，具体实现步骤如下：

步骤1：提取并处理SVG内容 #

从图表容器中克隆SVG，处理外部图片和内联样式，确保导出的SVG包含所有必要资源：

function getChartSvg() {
  const container = document.querySelector('.chart-container');
  const svg = container.querySelector('svg');
  const clonedSvg = svg.cloneNode(true);

  // 转换外部图片为base64，避免PDF中图片丢失
  const imgElements = clonedSvg.querySelectorAll('image');
  imgElements.forEach(img => {
    const imgNode = new Image();
    imgNode.crossOrigin = 'anonymous'; // 跨域图片需服务器配置允许
    imgNode.onload = () => {
      const canvas = document.createElement('canvas');
      canvas.width = imgNode.width;
      canvas.height = imgNode.height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(imgNode, 0, 0);
      img.setAttribute('href', canvas.toDataURL('image/png'));
    };
    imgNode.src = img.getAttribute('href');
  });

  // 内联图表样式，避免导出后样式丢失
  const styleTag = document.createElement('style');
  styleTag.textContent = `
    /* 替换为你图表实际用到的样式 */
    .org-node {
      font-family: 'Inter', sans-serif;
    }
  `;
  clonedSvg.prepend(styleTag);

  return new XMLSerializer().serializeToString(clonedSvg);
}

步骤2：用jsPDF导入SVG生成PDF #

修改下载函数，直接将SVG导入A0尺寸的PDF：

function downloadPdf() {
  const svgContent = getChartSvg();
  const pdf = new jspdf.jsPDF('landscape', 'mm', 'a0');

  // 计算SVG在A0纸张中的适配比例
  const svgWidth = parseFloat(svg.getAttribute('width'));
  const svgHeight = parseFloat(svg.getAttribute('height'));
  const a0Width = 1189;
  const a0Height = 841;
  const scale = Math.min(a0Width / svgWidth, a0Height / svgHeight);

  // 导入SVG到PDF
  pdf.addSVG(svgContent, 0, 0, svgWidth * scale, svgHeight * scale);
  pdf.save('chart.pdf');
}

注意：需要安装支持SVG的jsPDF插件，比如jspdf-svg，执行npm install jspdf jspdf-svg即可。

备选方案：提升位图分辨率（临时过渡） #

如果暂时无法切换SVG方案，可以尝试大幅提高导出位图的分辨率，同时改用PNG减少压缩损耗：

function downloadPdf(chart) {
  const targetDpi = 600; // 打印级别的高分辨率
  const scale = targetDpi / 96; // 浏览器默认DPI为96，按比例放大

  chart.exportImg({
    save: false,
    full: true,
    pixelRatio: scale,
    onLoad: (base64) => {
      const pdf = new jspdf.jsPDF('landscape', 'mm', 'a0');
      const img = new Image();
      img.src = base64;
      img.onload = function () {
        const aspectRatio = img.height / img.width;
        const pdfWidth = 1189;
        const pdfHeight = pdfWidth * aspectRatio;
        
        // 用PNG代替JPEG，避免压缩失真
        pdf.addImage(img, 'PNG', 0, 0, pdfWidth, pdfHeight);
        pdf.save('chart.pdf');
      };
    },
  });
}

此方法生成的PDF文件会较大，且本质还是位图，放大到极致仍会有模糊，仅作为临时优化。

额外优化提示 #

• 修复你代码中节点样式的语法错误：比如width:${d.width} px多了空格，应该写成width:${d.width}px，否则会导致节点布局异常。
• 确保图表使用的字体是PDF支持的，或通过内联字体的方式嵌入到SVG中，避免导出后字体替换导致的模糊。

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