Как правильно импортировать ткань. ⇐ Javascript

[Anonymous]

Я строю проект Vue 3 с Vite и пытаюсь интегрировать Fabric.js (v6.7.0), чтобы позволить рисовать PDF, отображаемый с использованием pdf.js. < /p>
Вот проблема:
Я установил ткань через: < /p>

Код: Выделить всё

npm install fabric < /code>
Затем я попытался импортировать и использовать его так: < /p>
import { fabric } from 'fabric' const canvas = new fabric.Canvas(...) < /code>
Но я получаю следующую ошибку в браузере: < /p>
Uncaught SyntaxError: The requested module 'fabric' does not provide an export named 'fabric' < /code>
Тогда я попробовал другие подходы, такие как: < /p>
import fabric from 'fabric' < /code>
Но это дает мне: < /p>
Uncaught SyntaxError: The requested module 'fabric' does not provide a default export < /code>
Наконец, я попробовал: < /p>
import * as fabric from 'fabric' 

But then fabric.Canvas is undefined
(console.log(fabric) just gives a plain object with some utility properties — no Canvas constructor).
My environment:

[*]Vue 3 (Composition API)
[*]Vite 5 < /li>
fabric.js 6.7.0 < /li>
No TypeScript < /li>
< /ul>
Что я пытаюсь сделать:
Я хочу: < /p>

rendend staring pdf pdf. Fabric.js, чтобы позволить пользователю рисовать/подписать верх над холстом
[*] Экспортировать результат как изображение или PDF

Что не работает:
importing fabric.js в любом из стандартных способов, кажется, не дает мне доступа к Fabric.canvas, и я не могу найти докладные доктора, которые я не смогу, чтобы я не смогу найти, на основе, на основе мы. /> Вопрос: < /p>

Кто -нибудь успешно использовал Fabric.js V6 + с Vite + Vue 3? Совместимость? PrettyPrint-Override ">

Код: Выделить всё

import * as fabric from 'fabric'
import { jsPDF } from 'jspdf'
import html2canvas from 'html2canvas'
import * as pdfjsLib from 'pdfjs-dist'
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.mjs?worker'
pdfjsLib.GlobalWorkerOptions.workerPort = new pdfjsWorker()
pdfjsLib.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.min.js`

const signDialog = ref(false)
const pdfCanvas = ref(null)
let fabricCanvas = null

const openSignDialog = async (path) => {
try {
signDialog.value = true

const response = await api.get(`/api/doc/download/${path}`, { responseType: 'blob' })
const blob = new Blob([response.data], { type: 'application/pdf' })
const pdfData = await blob.arrayBuffer()

const pdf = await pdfjsLib.getDocument({ data: pdfData }).promise
const page = await pdf.getPage(1)
const viewport = page.getViewport({ scale: 1.5 })
const canvas = pdfCanvas.value
const context = canvas.getContext('2d')
canvas.height = viewport.height
canvas.width = viewport.width

await page.render({ canvasContext: context, viewport }).promise

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

} catch (err) {
console.error('load pdf error:', err)
}
}

const exportSignedPDF = async () => {
const canvasEl = pdfCanvas.value
const image = await html2canvas(canvasEl)
const imgData = image.toDataURL('image/png')
const pdf = new jsPDF({
orientation: 'portrait',
unit: 'px',
format: [canvasEl.width, canvasEl.height]
})

pdf.addImage(imgData, 'PNG', 0, 0, canvasEl.width, canvasEl.height)
pdf.save('signed.pdf')
}

Подробнее здесь: https://stackoverflow.com/questions/796 ... -is-undefi