ChartJS responsive resize for print - not working in Firefox/IE11/Edge

问题

Using the following code I've managed to get ChartJS to resize correctly on Chrome before the print page appears;

function beforePrint () {
  for (const id in Chart.instances) {
    Chart.instances[id].resize()
  }
}

if (window.matchMedia) {
  let mediaQueryList = window.matchMedia('print')
  mediaQueryList.addListener((mql) => {
    if (mql.matches) {
      beforePrint()
    }
  })
}

window.onbeforeprint = beforePrint

Unfortunately this code does not work for Firefox/IE11/Edge. The beforePrint() function is being correctly fired on all browsers, but it appears the resize() does not have enough time to finish resizing before the print actually happens, so it gets cut off. The chart should take up 100% width of the page, but here's what happens on Edge for example (only half of graph shown):

Is there a way to delay the print until resizing finishes? Or a way to call the resize() method earlier? Or some other workaround?

Thanks!

来源：https://stackoverflow.com/questions/52754926/chartjs-responsive-resize-for-print-not-working-in-firefox-ie11-edge