pdfjs
Official website: PDF.js
Official demo: PDF.js viewer
Installation and use
download
- Click download
- Select stable version
Project introduction
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
Project use
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):
<script type="text/javascript">
var DEFAULT_URL = "";
var pdfUrl = document.location.search.substring(1);
if (null == pdfUrl || "" == pdfUrl) {
var BASE64_MARKER = ';base64,'; //Declare file stream encoding format
var preFileId = "";
var pdfAsDataUri = sessionStorage.getItem("_imgUrl"); //Here is the base64 code of the pdf file. I passed Base64 through the session
var pdfAsArray = convertDataURIToBinary(pdfAsDataUri);
DEFAULT_URL = pdfAsArray;
//Code conversion
function convertDataURIToBinary(dataURI) {
//[RFC2045] stipulates that a line of Base64 cannot exceed 76 characters, and if it exceeds 76 characters, a carriage return line feed character is added. Therefore, you need to remove the line feed character and carriage return character in the base64 field.
var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
var newUrl = dataURI.substring(base64Index).replace(/[\n\r]/g, '');
var raw = window.atob(newUrl); //This method cannot be parsed normally in the ie kernel.
var rawLength = raw.length;
//Convert to pdf Uint8Array types that can be directly resolved by. JS
var array = new Uint8Array(new ArrayBuffer(rawLength));
for (i = 0; i < rawLength; i++) {
array[i] = raw.charCodeAt(i) & 0xff;
}
return array;
}
}
</script>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>- Exhibition
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