两种打印方式：1.window.print() 2.右键-打印（Ctrl + P）

注意点：在使用js调用window.print()时需要注意调用前后是否有对页面进行修改的操作，其会导致页面的缩放出现问题

<template>
...
        <n-popconfirm @positive-click="generateReport" positive-text="确认" negative-text="取消">
          <template #trigger>
            <n-button>打印单词表</n-button>
          </template>
          确认后将当前数据保存到历史记录
        </n-popconfirm>
...
</template>
<script setup>
...
function generateReport() {
  window.print()
}
...
</script>

这代码看上去没有一点问题，但是打印预览时，画面明显被缩小很多

再看下右键-打印（Ctrl + P）的打印预览（这才是正常效果）：

实在找不到问题，我把打印按钮加到了表格里面，再点击打印时，居然就变成了正常效果。

一开始排查的时候，以为是 @media print{} 的样式出现了隔离，后面东调调西调调发现压根没这回事。

后面又去问了问豆包，提到一点：说是可能在打印的前后修改了Dom 所以导致两种方式预览不一致的情况。

我寻思 generateReport 就一行代码，不肯能修改过dom结果，问题应该不在这！

豆包后面输出半天知识但并没有直接解决我的问题。

我心想，不如在豆包的页面给某个按钮添加个 window.print() 的打印操作，再来试试两种方式有没有差别。

结果还真是有差别，通过按钮打印的还是被缩小了很多

下方是通过右键打印生成的预览画面：

简直奇了怪了，难不成是大家都有这个问题？

但是不应该啊，第一种方式明显有问题把，字那么小，打印出来肯定是看不下去的。

我在多次比较中，发现打印面板的右侧有个“更多设置”，里面居然有个“缩放”，我选成自定义，然后将100改为了70，好像画面确实小了些

顿时我灵光一现，难道是 window.print() 和 右键打印 的默认缩放数字不一样？

第一时间跑去自己的页面进行验证，emmm，没有“更多设置” 的选项。。。

然后去代码删掉了样式“ @page { size: 'A4' }” ， “更多设置” 得以重新现世，然后我再次对比了两种方式的打印预览结果

他么的怎么还是老样子啊，缩放还都是 100 ！！问题压根不再这里？？

我无语了，迷茫的手在无意间将 100 改为了 70，这是居然意外发现了线索

原来是 popconfirm 的提示框！！

啊？难不成是这个 popconfirm 修改了页面导致页面被缩放了？！

我连忙把popconfirm组件删除，只留下了button，然后再测试打印，结果完全一致了这下！

好吧，折腾半天原来答案早就出现了，只是我没注意到。。。

现在问题解决了，又可以愉快的写代码了！

！不对，一丝疑问突然再脑袋炸开：为什么豆包页面也会出现同为100缩放但页面显示也不一样呢？

当我鼠标再次点击 上文的 span 按钮时，突然发现：

啊这，这也算是修改了dom结构把。。。