Official website: PDF.js
Official demo: PDF.js viewer
Installation and use
- Click download
- Select stable version
This article focuses on the files of vue-cli4
- Create a new pdfjs folder under the public folder, and copy the downloaded web and build into it
Modify source code configuration (Preliminary)
Because pdf JS does not support cross domain file loading. Direct loading will not succeed. The error "file origin doesn't match viewer" will be reported, so the viewer The line of throwing errors in the JS file will be commented out
Preliminary run demo
Since it is a new framework, you must want to try the effect first. Very simple, put an iframe on the page, and then src equals to viewer The public path of HTML can be directly (pdfjs/* * *).
<iframe src="pdfjs/web/viewer.html" frameborder="0" class="pdf-window"></iframe>
The effect is exactly the same as the official demo.
Formally face the project requirements
I mainly focus on the pdf file stream (base64/ArrayBuffer) returned by the background. Of course, if the background can directly return the pdf address, it can directly (file= the file path returned by the back end'/static/pdfjs/web/viewer.html? File='+ pdfvisiturl).
- Open viewer HTML, add the following code (note that it should be placed before the pdf.js reference):
This code means to read the stored base64 code from the session, and then display it.
- Modify the fixed path to read pdf file to the incoming variable
Open viewer JS, search defaultUrl and replace with variable
At this point, all the plug-in contents to be modified are modified. Next, we store base64 into the session. Next, there are two ways to display pdf:
- Jump to viewer HTML.
sessionStorage.setItem('_imgUrl', interfaceUrl) window.open('pdfjs/web/viewer.html')
- It can be directly embedded in the component page.
js: sessionStorage.setItem('_imgUrl', interfaceUrl) this.interfaceUrl = interfaceUrl Page: <div v-if="interfaceUrl" class="homeLayout__right__pdf"> <iframe :src="`pdfjs/web/viewer.html`" frameborder="0" class="pdf-window"></iframe> </div>
As for disabling printing and downloading, do not comment directly. Just use css to hide it. I'm going to work. As for how to decrypt the encrypted pdf file stream returned from the background, I'll add later