重新绘制D3/SVG图表以打印

Question

我在我的网站上有一个d3.js图表。

我希望它重新刷新以打印。我知道这样做的唯一方法是使用window.matchMedia('print')和" OnBeforePrint"的组合根据窗口的大小重新绘制图表，因为浏览器将使该事件中的窗口大小。p>但是，D3在Safari和Firefox中的绘制不够快。结果是D3重新呈现图表，但这为时已晚。但是，这确实在Chrome中起作用：

let beforePrint = () => {
  this.handleResize();
};
let afterPrint = () => {
  this.handleResize();
};
if (window.matchMedia) {
  window.matchMedia('print').addListener(mql => {
    if (mql.matches) {
      beforePrint();
    } else {
      afterPrint();
    }
  });
}
window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;

还有其他用于重新绘制D3/SVG图表的选项吗？

Answer 1

我为图形使用了重复元素。

首先，该图的打印版本具有宽度以匹配纸张尺寸。然后是隐藏的，并显示了屏幕版本。

此答案中的AngularJS解决方案的详细信息。

Answer 2

在2022年（1）中相同的问题。

我结束了毫秒（2）延迟打印：

function print()
{
    window.onafterprint = afterPrint; // This one occurs at the right time, keep it.
    beforePrint();
    window.setTimeout(window.print, 500);
}

（插入"打印"按钮，以及如何使用javascript或jQuery禁用Ctrl P所示的Ctrl-P？; a a las the the the the the the fe the the for the print print print print print print trint of the tofer to tefer to fe to te tofe to te fe prest print of ctrint of ctrl print of ctrl print of ctrl-p> ctrl p）

（与@jsruok的解决方案相反，我的面向印刷的影子SVG非常大，所以我不想在处理" Main＆quot"时将其隐藏起来，我需要在打印时间生成一次丢弃）

---

（1）打印a＆quot" big"SVG，我用多个页面大小的SVG（思考马赛克）代替，每个svgs <use transform="translate()">'in g。

（2）在我看来，Firefox的SVG渲染被延迟了，好像在SettieMout（0）中，与HTML DOM元素相反：

• ctrl-p
  • onBeFreefrint称为
    • 添加DOM Elements
    • 添加SVG元素
    • 返回
  • Firefox抓取DOM生成打印预览：考虑了新的DOM元素，但新的SVG显示为空白
  • infterprint称为
• 新的循环迭代，SVG渲染
• 现在，如果Ctrl-p'Rinting，生成的马赛克出现在Print Preview