React中如何程序化触发window-resize事件适配PDF视图

我在React项目中使用一款npm包渲染PDF，该PDF被渲染至可调整宽度的列中。调整列宽时，PDF查看器的部分区域会适配新宽度，但PDF视图本身不会；而只要稍微调整浏览器窗口宽度，PDF视图就会立即适配新宽度。

正常视图：

列宽调整后...工具栏已适配，但滚动条和PDF视图未适配：

窗口宽度微调后：

显然该PDF查看器监听了onWindowResize事件，我不想修改PDF包或大幅改动现有代码，请问是否有钩子或方法可在不改变窗口大小的前提下触发window-resize事件，以便添加到列宽调整事件中？

你可以直接手动触发浏览器的resize事件，无需修改窗口大小，就能触发PDF查看器的resize适配逻辑：

• 标准实现代码：
  在列宽调整完成的回调函数中添加以下代码：

  window.dispatchEvent(new Event('resize'));
  

  这会模拟窗口 resize 行为，触发所有监听window.resize的事件处理函数，包括PDF查看器的宽度适配逻辑。

• 兼容旧浏览器方案（目前几乎无需使用）：
  如果需要兼容老旧IE浏览器，可使用：

  if (window.fireEvent) {
    window.fireEvent('onresize');
  } else {
    window.dispatchEvent(new Event('resize'));
  }
  

在React项目里，你只需要找到列宽调整的事件处理函数（比如拖拽列宽结束的回调），将上述代码插入即可，完全不需要改动PDF包源码。

内容的提问来源于stack exchange，提问作者Pieter Pienaar