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>
