如何在导出mat-table时禁用自动滚动？

该问题通常出现在使用mat-table-exporter类库执行导出操作的场景下，主要触发原因有两个：

1. 插件为了读取全量表格数据，会临时渲染所有分页/虚拟滚动隐藏的行，页面高度骤增触发滚动到底部
2. 部分旧版本插件会在DOM底部插入临时隐藏的下载触发a标签，标签挂载时默认获得焦点会带动页面滚动

• 方案1：导出前后手动保存/恢复滚动位置（通用兼容方案）
  无需修改插件源码，适配所有场景，在导出逻辑前后增加滚动位置记录和还原逻辑即可：

// 导出前记录当前滚动位置，若滚动容器为自定义div，替换window为对应的DOM元素即可
const currentScroll = window.scrollY || document.documentElement.scrollTop;

// 执行导出操作
this.exporter.exportTable('xlsx', {
  fileName: '表格导出文件'
});

// 导出完成后恢复滚动位置
this.exporter.exportCompleted.pipe(take(1)).subscribe(() => {
  window.scrollTo({
    top: currentScroll,
    behavior: 'instant' // 禁用滚动动画，避免用户感知
  });
});

• 方案2：修复临时下载元素导致的滚动
  如果排查后确认是临时下载元素触发的滚动，可以全局添加如下样式，将隐藏的下载触发元素固定在视口顶部，避免元素挂载在底部导致页面滚动：

a[download][style*="display: none"] {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
}

• 方案3：仅导出当前页避免全量行渲染
  如果不需要导出全部分页数据，仅需要导出当前可见页内容，可以在导出配置中关闭全量行导出，插件就不会临时渲染隐藏行，也就不会触发页面高度变化导致滚动：

this.exporter.exportTable('xlsx', {
  fileName: '当前页表格导出',
  exportAllRows: false
});

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