# Some problems while customizing my own ui

**URL:** <https://pdfjs.community/t/some-problems-while-customizing-my-own-ui/1999>\
**Category:** Technical Support\
**Tags:** pdfjs-express\
**Created:** [September 1, 2022, 3:05pm UTC](https://pdfjs.community/t/some-problems-while-customizing-my-own-ui/1999 "2022-09-01T15:05:47Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![xu\_sherry\_ke](https://avatars.discourse-cdn.com/v4/letter/x/e9bcb4/32.png) [@xu\_sherry\_ke](https://pdfjs.community/u/xu_sherry_ke)\
**Post date:** [September 1, 2022, 3:05pm UTC](https://pdfjs.community/t/some-problems-while-customizing-my-own-ui/1999/1 "2022-09-01T15:05:47Z")

</div>

**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.

 ![图片](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/9bbe1deb312b6da5fd55690d84ea2531d9a9f19d.png)  
I have read [this guide](https://pdfjs.express/documentation/ui-customization/customizing-setup) , [the demo](https://github.com/pdfjs-express/pdfjs-express-custom-ui-sample), 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**

```javascript
<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>

```

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/ffbcd25c7d423db8d5acd5db201c272f4db306dd.png) [@system](https://pdfjs.community/u/system)\
**Post date:** [September 1, 2022, 3:05pm UTC](https://pdfjs.community/t/some-problems-while-customizing-my-own-ui/1999/3 "2022-09-01T15:05:52Z")

</div>

**Hello, I’m Ron, an automated tech support bot 🤖**

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

Guides:
- [How to customize viewer - What option should I choose](https://pdfjs.express/documentation/ui-customization/customizing-setup.8#what-option-should-i-choose)
- [Manually Download & integrate PDF.js Express Plus - Integrate into your application](https://pdfjs.express/documentation/get-started/manually#integrate-into-your-application)
- [Core engine for WebViewer - Creating your own UI using WebViewer Core](https://pdfjs.express/documentation/ui-customization/core#creating-your-own-ui-using-webviewer-core)

APIs:
- [UI.Header - getItems()](https://pdfjs.express/api/UI.Header.html#getItems__anchor)
- [UI.Fonts - addSignatureFont(font)](https://pdfjs.express/api/UI.Fonts.html#.addSignatureFont__anchor)
- [UI.Popup - update( [items])](https://pdfjs.express/api/UI.Popup.html#update__anchor)

Forums:
- [I want to customize the viewer with the css file I wrote](https://pdfjs.community/t/i-want-to-customize-the-viewer-with-the-css-file-i-wrote/1628/1)
- [Import fails after editing freetext annotation](https://pdfjs.community/t/import-fails-after-editing-freetext-annotation/289/1)
- [I cannot use PDF.JS Express to open a PDF file by url in a Vue Project, please help me figure out how is that happen](https://pdfjs.community/t/i-cannot-use-pdf-js-express-to-open-a-pdf-file-by-url-in-a-vue-project-please-help-me-figure-out-how-is-that-happen/660/1)

  
  

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](https://utm.guru/ueQNw)

---

<div class="post-metadata">

**Author:** ![tgordon](https://avatars.discourse-cdn.com/v4/letter/t/aca169/32.png) [@tgordon](https://pdfjs.community/u/tgordon)\
**Post date:** [September 6, 2022, 4:41pm UTC](https://pdfjs.community/t/some-problems-while-customizing-my-own-ui/1999/4 "2022-09-06T16:41:28Z")

</div>

Hello xu\_sherry\_ke,

Have you checked out our VueJS sample?

> **[GitHub - pdfjs-express/vuejs-pdfjs-viewer: An example Vue project displaying...](https://github.com/pdfjs-express/vuejs-pdfjs-viewer)**
>
> An example Vue project displaying a PDF viewer. Contribute to pdfjs-express/vuejs-pdfjs-viewer development by creating an account on GitHub.

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](https://utm.guru/ueQNw)

---

<div class="post-metadata">

**Author:** ![juan.giraldo](https://avatars.discourse-cdn.com/v4/letter/j/5daacb/32.png) [@juan.giraldo](https://pdfjs.community/u/juan.giraldo)\
**Post date:** [July 14, 2023, 3:58pm UTC](https://pdfjs.community/t/some-problems-while-customizing-my-own-ui/1999/5 "2023-07-14T15:58:37Z")

</div>

Does someone find the way to implement the pdfjs express on vue3