Vue集成vue-html2pdf报window is not defined错误如何解决

vue-html2pdf完全依赖浏览器端的window、html2canvas等客户端专属API，不支持服务端运行。你当前项目大概率是Nuxt等SSR/SSG框架，即使模板包裹了<client-only>标签，组件顶部的静态导入逻辑仍会在服务端渲染阶段执行，服务端不存在window对象，因此触发报错。

方案1：异步动态导入组件（推荐，无侵入） #

删除组件顶部的静态导入语句import VueHtml2pdf from 'vue-html2pdf'，修改组件注册逻辑为异步动态导入，仅在客户端环境加载插件：

// 组件内components配置
components: {
  VueHtml2pdf: () => {
    // 仅客户端环境加载插件
    if (typeof window !== 'undefined') {
      return import('vue-html2pdf')
    }
    // 服务端返回空占位组件
    return Promise.resolve({ render: () => null })
  }
},
methods: { 
  generatePDF () { 
    // 替换process.browser为更通用的客户端判断
    if (typeof window !== 'undefined') { 
      this.$refs.html2Pdf?.generatePdf() 
    } 
  } 
}

模板原有逻辑无需修改。

方案2：注册为客户端专属插件（适配Nuxt框架） #

如果是Nuxt项目，可以在plugins目录下新建vue-html2pdf.client.js文件，代码如下：

import Vue from 'vue'
import VueHtml2pdf from 'vue-html2pdf'

Vue.component('VueHtml2pdf', VueHtml2pdf)

.client后缀的插件Nuxt会自动识别为仅客户端加载，无需额外配置，组件内直接使用即可。

修改完成后重启项目即可解决window is not defined报错。

内容的提问来源于stack exchange，提问作者Pierrick Martellière