Some problems while customizing my own ui

Which product are you using?
PDF.js Express Viewer

PDF.js Express Version
8.7.0

Detailed description of issue
I am trying to customize viewer in a vue3 project, and I got this error.


I have read this guide , the demo, and another FAQ topic which is similar with mine, but I still didn’t solve it.

Expected behaviour
loading the pdf correctly without any header, ribbon, and anything else, I just want to display a pdf file in the simplest way, and can be zoomed in and out.

Does your issue happen with every document, or just one?
Every document

Link to document

Code snippet

<template>
    <div id="scroll-view" class="wrapper" >
        <div id="viewer" class="pdf"> </div>
    </div>
</template>

<script>
import { getReport } from '@/network/request'
import { Decrypt } from "@/utils/crypto"
import '../../public/lib/core/webviewer-core.min.js'
import '../../public/lib/core/pdfjs/PDFJSDocumentType.js'

export default {
    name: 'H5ReportView',
    data() {
        return {
            ...
            licenseKey: {mykey},
            docViewer: null,
            viewer: null,
            scrollView: null
        };
    },

    created() {
        Core.setWorkerPath(process.env.BASE_URL + 'lib/core')
        this.docViewer = new Core.DocumentViewer()
        this.viewer = document.getElementById('viewer')
        this.scrollView = document.getElementById('scroll-view')
    },
    
    mounted() { 
        this._init()
        this.loadPdfBlob()
    },

    methods: {
        _init() {
            window.documentViewer = this.docViewer
            window.WebViewer = {}
            window.WebViewer['l'] = () => this.licenseKey
            this.docViewer.setScrollViewElement(this.scrollView);
            this.docViewer.setViewerElement(this.viewer);
        },

        loadPdfBlob() {
            this.pars = Decrypt(this.param).split('&');
            const param = {
                ...some params...
            }
            let url = this.pars.at(0) + {my api}
            //get pdf stream from backend
            return getReport(url, param).then(async res => {
                const pdfdata = new Blob([res], { type: 'application/pdf' })
                this._loadPdf(pdfdata)
            }).catch(err => console.log(err));
        },

        _loadPdf(pdfdata) {
            this.docViewer.loadDocument(pdfdata, { filename: 'progress.pdf' })
            this.docViewer.disableAnnotations();
        }
    }
}
</script>


<style lang="less" scoped>
    .wrapper {
        width: 100%;
        height: 100%;
    }
    .pdf {
      width: 100vw;
      height: 100vh;
    }
</style>

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

Share how you are using PDF.js Express in your organization you could win a $500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free. Learn more here

Hello xu_sherry_ke,

Have you checked out our VueJS sample?

This would be a better starting point for customizing the UI for VueJS.

Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron


Share how you are using PDF.js Express in your organization you could win a $500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free. Learn more here