D3 组织结构图导出为 PDF 时非常模糊？

Question

我想将 D3 组织结构图导出为 A0 中的 PDF - 这基本上可以工作，只是 PDF 中的图像非常模糊......

我正在使用这个脚本，似乎改变 dpi 并没有真正做任何事情。知道为什么它很模糊吗？那么我应该导出为 SVG 吗？使用不同的方法？

我还添加了用于创建实际图表的代码，因为这似乎是必需的信息。

<script>
  var chart = null;
  d3.csv(
    'data.csv'
  ).then((data) => {
    chart = new d3.OrgChart()
      .nodeHeight((d) => 85 + 25)
      .nodeWidth((d) => 220 + 2)
      .childrenMargin((d) => 50)
      .compactMarginBetween((d) => 35)
      .compactMarginPair((d) => 30)
      .neighbourMargin((a, b) => 20)
      .compactMarginBetween(node => 150)
      .nodeContent(function (d, i, arr, state) {
        const color = '#FFFFFF';
        const imageDiffVert = 25 + 2;
        return `
                <div style='width:${d.width} px;height:${d.data.height} px;padding-top:${imageDiffVert - 2}px;padding-left:1px;padding-right:1px'>
                    <div style="font-family: 'Inter', sans-serif;background-color:${color};  margin-left:-1px;width:${d.width - 2}px;height:${d.data.height - imageDiffVert}px;border-radius:10px;border: 1px solid #E4E2E9">
                        <div style="display:flex;justify-content:flex-end;margin-top:5px;margin-right:8px"><br/> 
                        </div>                      
                        <div style="background-color:${color};margin-top:${-imageDiffVert - 20}px;margin-left:${15}px;border-radius:100px;width:50px;height:50px;" ></div>
                        <div style="margin-top:${-imageDiffVert - 20
          }px;">   <img src=" ${d.data.image}" style="margin-left:${20}px;border-radius:100px;width:40px;height:40px;" /></div>
                        <div style="font-size:15px;color:#08011E;margin-left:20px;margin-top:10px">  ${d.data.name
          } </div>
                        <div style="color:#716E7B;margin-left:20px;margin-top:3px;font-size:10px;"> ${d.data.position
          } </div>

                    </div>
                </div>
                            `;
      })
      .container('.chart-container')
      .data(data)
      .render();

  });
</script>

<script>
  function downloadPdf(chart) {
    var dpi = 300;

    chart.exportImg({
      save: false,
      full: true,
      pixelRatio: dpi / 300,
      onLoad: (base64) => {
        var pdf = new jspdf.jsPDF('landscape', 'mm', 'a0');
        var img = new Image();
        img.src = base64;
        img.onload = function () {
          var widthInInches = img.width / dpi;
          var heightInInches = img.height / dpi;

          var aspectRatio = img.height / img.width;

          var pdfWidth = 1189;
          var pdfHeight = pdfWidth * aspectRatio;

          pdf.addImage(
            img,
            'JPEG',
            0,
            0,
            pdfWidth,
            pdfHeight
          );
          pdf.save('chart.pdf');
        };
      },
    });
  }
</script>

Answer 1

我能够运行你的代码示例，我可以看到问题不是来自 jsPDF。下次，请提供一个可重现的示例，无需修改即可复制和执行，因为我运行代码花费的时间比识别问题的时间要多。 jsPDF 将图像添加到 pdf 文件中，而不对其进行压缩或更改质量。我下载了exportImg方法生成的图像，发现质量不好。为了接收质量更好的图像，我将“pixelRatio：dpi / 300”更改为“scale：10”。我想说的是，10是我脑海中第一个出现的数字。 ExportImg 方法没有名为“pixelRatio”的参数。然后我收到了质量更好的图像，它与 pdf 文件中的质量相同。

我会触摸创建 pdf 的函数，但我认为这不是主题。