如何将带CSS样式的D3生成SVG转为PDF？现有方案遇样式丢失问题

我来帮你搞定这个困扰！你遇到的核心问题是html2canvas无法捕获外部<style>标签里的CSS样式——它在把SVG转成画布时，只会读取元素的内联属性，外部样式规则会被忽略，所以你的矩形才会变成默认的黑色。

根本原因 #

html2canvas的渲染机制是基于DOM的当前状态，但它不会解析外部CSS样式表或<style>标签里的规则，只能识别元素本身的style属性里的样式。所以你之前加的全局rect样式根本没被捕获到。

最佳解决方案：样式内联化 #

把CSS样式直接写到SVG元素的style属性里，是最可靠的解决方式，下面给你几种实现方法：

1. 静态SVG手动内联 #

如果你的SVG是静态写在HTML里的，直接给每个<rect>加style属性就行：

<svg id="svg1" width="1000" height="700">
 <g id="elementsContainer">
 <rect x="25" y="25" width="240" height="240" style="fill: #868e96; opacity: 0.3;" />
 <rect x="275" y="25" width="240" height="240" style="fill: #868e96; opacity: 0.3;" />
 <rect x="25" y="275" width="240" height="240" style="fill: #868e96; opacity: 0.3;" />
 <rect x="275" y="275" width="240" height="240" style="fill: #868e96; opacity: 0.3;" />
 </g>
</svg>

2. D3动态生成时直接设置内联样式 #

如果是用D3生成的SVG元素，创建的时候直接用.style()方法设置样式，这样生成的元素自带内联样式：

// 示例：用D3生成矩形并设置内联样式
d3.select("#elementsContainer")
  .selectAll("rect")
  .data(yourDataset) // 替换成你的数据
  .enter()
  .append("rect")
  .attr("x", d => d.x)
  .attr("y", d => d.y)
  .attr("width", 240)
  .attr("height", 240)
  // 直接设置内联样式
  .style("fill", "#868e96")
  .style("opacity", 0.3);

3. 批量给现有SVG元素添加内联样式 #

如果已经有了现成的SVG，不想手动改每个元素，可以用JS批量读取<style>里的规则并应用：

// 读取<style>里的rect样式规则
const styleSheet = document.styleSheets[0];
let rectStyle = "";
for (const rule of styleSheet.cssRules) {
  if (rule.selectorText === "rect") {
    rectStyle = rule.style.cssText;
    break;
  }
}

// 给所有rect元素添加内联样式
document.querySelectorAll("#svg1 rect").forEach(rect => {
  rect.style.cssText = rectStyle;
});

优化后的导出代码 #

样式内联后，你的genPDF函数不需要加timeout了，直接用原来的逻辑就行（顺便帮你修正了变量声明的小问题）：

function genPDF() {
  const quality = document.getElementById("quality").value;
  if (quality) {
    html2canvas(document.getElementById("svg1"), {
      scale: quality,
      logging: true,
      letterRendering: 1,
      allowTaint: true,
      useCORS: true
    }).then(function (canvas) {
      const img = canvas.toDataURL('image/png');
      const doc = new jsPDF('l', 'mm', 'a4');
      const imgProps = doc.getImageProperties(img);
      const pdfWidth = doc.internal.pageSize.getWidth();
      const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
      doc.addImage(img, 'PNG', 2, 2, pdfWidth, pdfHeight);
      doc.save('generatedPDF.pdf');
    });
  } else {
    alert("Please enter a scale value!");
  }
}

为什么timeout没用？ #

你之前加的延迟完全没必要——html2canvas在调用时就已经快照了DOM状态，延迟处理canvas只是等渲染完成，但样式本身没被内联的话，它还是读不到外部CSS规则，所以根本解决不了问题。

内容的提问来源于stack exchange，提问作者Aadil Anil Kumar