TypeError: attempted to get private field on non-instance

在使用vue3 + vite 开发pdf预览的时候发现报了如上的错误

源代码

import { getDocument, GlobalWorkerOptions } from 'pdfjs-dist/legacy/build/pdf'


const props = defineProps(['url'])


const data = reactive({
    pdf_scale: 1.0, //pdf放大系数
    pdf_pages: [],
    pdf_div_width: '',
    currentPage: 1,
    pdfDoc: null
})

const loadFile = async () => {
    await import("pdfjs-dist/legacy/build/pdf.worker.entry.js")
    GlobalWorkerOptions.workerSrc = {}
    //初始化pdf
    data.pdfDoc = await getDocument(props.url).promise
    data.pdf_pages = data.pdfDoc.numPages
    nextTick(() => renderPage())
}


const renderPage = async (num = 1) => {
    data.currentPage = num
    //渲染pdf页
    const page = await data.pdfDoc.getPage(num)
    const canvas = document.getElementById('the_canvas' + num)
    // const canvas = document.getElementById("the_canvas");
    const ctx = canvas.getContext('2d')
    const dpr = window.devicePixelRatio || 1
    const bsr =
        ctx.webkitBackingStorePixelRatio ||
        ctx.mozBackingStorePixelRatio ||
        ctx.msBackingStorePixelRatio ||
        ctx.oBackingStorePixelRatio ||
        ctx.backingStorePixelRatio ||
        1
    const ratio = dpr / bsr
    const viewport = page.getViewport({ scale: data.pdf_scale })
    canvas.width = viewport.width * ratio
    canvas.height = viewport.height * ratio
    canvas.style.width = viewport.width + 'px'
    data.pdf_div_width = viewport.width + 'px'
    canvas.style.height = viewport.height + 'px'
    ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
    const renderContext = {
        canvasContext: ctx,
        viewport: viewport,
    }
    page.render(renderContext)
    if (data.pdf_pages > num) {
        setTimeout(() => {
            return renderPage(num + 1)
        })
    }
}


const nextPage = () => {
    if (data.pdf_pages > data.currentPage) {
        renderPage(data.currentPage + 1)
    }
}
const prePage = () => {
    if (data.currentPage > 1) {
        renderPage(data.currentPage - 1)
    }
}


const scaleD = () => {
    //放大
    let max = 0
    if (window.screen.width > 1440) {
        max = 1.4
    } else {
        max = 1.2
    }
    if (data.pdf_scale >= max) {
        return
    }
    data.pdf_scale = data.pdf_scale + 0.1
    loadFile()
}


const scaleX = () => {
    //缩小
    let min = 1.0
    if (data.pdf_scale <= min) {
        return
    }
    data.pdf_scale = data.pdf_scale - 0.1
    loadFile()
}


onMounted(() => {
    loadFile()
})

这里排查到报错的源头是 this.#pagePromises.get(pageIndex); 这一句代码的问题 具体原因：vue双向绑定的原因提供的是一个proxy，而这里需要提供私有变量，所以pdfDoc不做双向绑定就可以了 改动如下

let pdfDoc = null // 这里取消双向绑定

const loadFile = async () => {
    await import("pdfjs-dist/legacy/build/pdf.worker.entry.js")
    GlobalWorkerOptions.workerSrc = {}
    //初始化pdf
    pdfDoc = await getDocument(props.url).promise
    data.pdf_pages = pdfDoc.numPages
    nextTick(() => renderPage())
}