Question

我正在尝试打印svg，但是未应用填充色。有办法吗？

const winPrint = window.open('', '', 'width=900,height=650');
let el = document.getElementsByClassName('testing')[0]
winPrint.document.write(el.innerHTML);

// winPrint.document.write(this.globalMap.nativeElement.innerHTML);
winPrint.document.close();
winPrint.focus();
winPrint.print();
winPrint.close();

html, body, svg {
  height: 100%
}

path {
  fill: orange;
  background-color: orange;
}

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path -->
<div class="testing">
  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path d="M 10,30
           A 20,20 0,0,1 50,30
           A 20,20 0,0,1 90,30
           Q 90,60 50,90
           Q 10,60 10,30 z"/>
</svg>
</div>

Answer 1

SVG中缺少颜色的原因是因为您正在打开一个新窗口，而仅将元素写入到所述窗口中，而不是CSS样式。您还需要将CSS复制到新窗口。如何执行此操作有多种方法。有些比其他的简单。

如果您只是希望复制所有样式元素，则可以执行以下操作（在很多情况下，此操作将无效）：

const winPrint = window.open('', '', 'width=900,height=650');
let el = document.getElementsByClassName('testing')[0];
winPrint.document.write(Array.from(document.querySelectorAll("style")).map(x => x.outerHTML).join("") + el.innerHTML);
winPrint.document.close();
winPrint.focus();
winPrint.print();
winPrint.close();

另一个选择是遍历所有元素并复制其计算出的CSS值。我建议您查看Get a CSS value with JavaScript，了解如何实际执行此操作。下面，我编写了一个示例，说明如何克隆元素及其计算出的CSS值。我仅以您的示例对此进行了测试。因此，我不能保证它会在所有地方都可以使用，但是从头开始可能会很好。

function cloneElement(el) {
  const clone = el.cloneNode(true);
  copyCSS(el, clone);

  return clone;
}

function copyCSS(source, dest) {
  const computedStyle = window.getComputedStyle(source);
  const cssProperties = Object.keys(computedStyle);
  for (const cssProperty of cssProperties) {
    dest.style[cssProperty] = computedStyle[cssProperty];
  }

  for (let i = 0; i < source.children.length; i++) {
    copyCSS(source.children[i], dest.children[i]);
  }
}

function printElement(el) {
  const clone = cloneElement(el);

  const winPrint = window.open('', '', 'width=900,height=650');
  winPrint.document.write(clone.outerHTML);
  winPrint.document.close();
  winPrint.focus();
  winPrint.print();
  winPrint.close();
}

printElement(document.querySelector(".testing"));

无法打印<path>填充色SVG

1 个答案: