我刚好在Vite5+Vue3的项目里踩过Fabric.js v6.x的导入坑，给你分享下亲测有效的解决方法！

1. 先解决最核心的导入问题 #

Fabric.js v6+为了支持树摇优化，调整了包的导出结构，默认的fabric入口不再导出完整的命名空间，这就是你导入后找不到Canvas的原因。有两种好用的导入方式：

方式一：按需导入（推荐，打包体积更小）

直接导入你需要的类，比如Canvas：

import { Canvas } from 'fabric'

然后实例化的时候直接用：

fabricCanvas = new Canvas(canvas, { isDrawingMode: true })

方式二：导入完整的fabric命名空间

如果你需要用到Fabric的很多API，不想一个个单独导入，可以导入完整的fabric对象：

import * as fabric from 'fabric/fabric-impl'

这时候就可以像老版本那样使用fabric.Canvas了：

fabricCanvas = new fabric.Canvas(canvas, { isDrawingMode: true })

2. 修正你代码里的错误 #

你原来的代码里写了new fabric.fabric.Canvas(canvas)，这里多套了一层fabric，不管用哪种导入方式，都应该改成new fabric.Canvas(...)（方式二）或者new Canvas(...)（方式一）。

3. 关于Vite的额外配置（一般不需要，但以防万一） #

Vite5本身对纯ESM包的支持很好，Fabric v6也是纯ESM，所以大部分情况下不需要额外配置。如果还是遇到奇怪的导入错误，可以在vite.config.js里添加依赖预构建优化：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  optimizeDeps: {
    include: ['fabric']
  }
})

4. 给你业务需求的小优化建议 #

你现在是把PDF直接渲染到canvas，再用Fabric包装这个canvas。其实更规范的做法是：把PDF渲染成图片后，作为Fabric的Image元素添加到Fabric画布上，这样Fabric可以统一管理所有绘制元素（包括用户的签名），导出的时候也更方便。比如：

// 渲染PDF页面后，转成Fabric Image
const pdfImage = new fabric.Image(canvas, { left: 0, top: 0 })
fabricCanvas.add(pdfImage)
fabricCanvas.renderAll()

导出的时候直接用Fabric自带的方法，比html2canvas更高效：

const imgData = fabricCanvas.toDataURL({ format: 'png' })
const pdf = new jsPDF({ orientation: 'portrait', unit: 'px', format: [canvas.width, canvas.height] })
pdf.addImage(imgData, 'PNG', 0, 0, canvas.width, canvas.height)
pdf.save('signed.pdf')

亲测这个方案在Vite5+Vue3+Fabric v6.7.0下完全可行，你可以试试！

内容来源于stack exchange