As a back-end development, front-end write function is also the first big, strong and good friends, more online resources; do a PDF preview of the functions of a mobile terminal, could have been by window.open (), the open, but no way, do the background of a small partner, passed the data front end is base64 bit , I can only be dealt with in accordance with the background to the data;
method one:
The most original way: through the canvas into the byte transfer pictures, simple, direct copy over someone else's code can use; 
but also serious shortcomings, Photo Gallery clarity is very low ;
code show as below
1. install dependencies
npm install pdfjs-dist
2 .template Code:
<template>
<div style="background-color:white;height:100%;">
<div class="v-viewbtns">
<div style="position:relative">
<button @click="scaleAdd">+</button>
<button @click="scaleReduce">-</button>
</div>
</div>
<div class="pdfList" style="position:relative;overflow:auto;">
</div>
</div>
</template>
3 .js Code
import PDFJS from 'pdfjs-dist';
import {getters} from '@/lib/store';
import {Dialog} from 'vant';
export default {
data(){
return {
pdfDataList: '',
scale:100,
}
},
created() {
PDFJS.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.min.js');
},
mounted(){
this.getPdfList (); // method called here the pdf
},
methods:{
getPdfList(){
// Here is the file I use to request the return back to my return base64 format issued ajax request
. This $ toast.loading ( 'Loading ...');
this.$axios.post(url, params)
.then(res => {
if(res.data){
this.getPageNum(res);
, data = res.data;
this.pdfDataList = data; // pass back the received data
this.showPdf (); // call to generate PDF
}else{
this.loading = false;
Dialog.alert({
message:res.message
}).then(()=>{
this.$router.go(-1);
});
}
this.$toast.hide();
});
},
async showPdf(){
let pdfList = document.querySelector ( '. pdfList') // DOM node by selecting querySelector using document.getElementById () is the same
let base64 = this.pdfDataList.fileValue // get bas464 coding
let decodedBase64 = atob (base64) // browser method for decoding comes
let pdf = await PDFJS.getDocument ({data: decodedBase64}) // Returns a target pdf
let pages = pdf.numPages // declare a variable equal to the current pages of pages of pdf file
for (let i = 1; i <= pages; i ++) {// cycle Pages
let canvas = document.createElement('canvas') ;
P = the await page the let df.getPage (I) // incoming call pages getPage method of the current cycle, a page object returns
let scale = 0.5; // zoom ratio, 1 represents original size
let width = document.body.clientWidth; // window width
let viewport = page.getViewport(scale);
let context = canvas.getContext ( '2d'); // create object rendering canvas
canvas.height = viewport.height; // definition of high and wide canvas
canvas.width = viewport.width;
let renderContext = {
canvasContext: context,
viewport: viewport
};
await page.render(renderContext)
canvas.className = 'canvas' // to canvas node defines a class name, and here I named canvas
pdfList.appendChild (canvas) // inserted in the last node pdfList
}
}
this.loading = false ;
},
SCALEADD () {
if(this.scale == 300) return ;
this.scale += 10;
this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
},
scaleReduce() {
this.scale += -10;
this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
}
},
}
A method is really quite simple, and 
the code is almost the same, according to the specific circumstances of your business needs to change to change on the line, but the way to deal with this serious problem is that pdf is not clear, more serious after scaling. Of course, why would very vague, of course I do not know of. . .
The second way is simpler provoke: Use vue depends PDFJS
Step 1: Install dependence
npm install vue-pdf
Step two: template page
<template>
<div style="background-color:white;height:100%;">
<div class="v-viewbtns" :style="{'margin-top':screentHeight *0.72 +'px'}" >
<div style="position:relative">
<button @click="scaleAdd">+</button>
<button @click="scaleReduce">-</button>
</div>
</div>
<div class="pdfList" style="position:relative;overflow:auto;">
<pdf
v-for="i in numPages"
ref="pdf"
:src="pdfSrc"
:key="i"
:page="i" >
</pdf>
</div>
</div>
</template>
The third step: JS Code
export default {
data(){
return {
pdfSrc:'',
scale:100,
numPages:0
}
},
components:{
pdf
},
mounted(){
this.getPdfList();
},
methods:{
getPdfList(){
// Here is the file I use to request the return back to my return base64 format issued ajax request
. This $ toast.loading ( 'Loading ...');
this.$axios.post(url, params)
.then(res => {
if(res.data){
this.getPageNum(res);
}else{
this.loading = false;
Dialog.alert({
message:res.message
}).then(()=>{
this.$router.go(-1);
});
}
this.$toast.hide();
});
},
getPageNum the async (RES) { // note about Kazakhstan here, because pass over the base64-bit file stream, so certainly do not know how much of the page is, of course, is to first get the number of pages about it
var decodedBase64 = atob (res.data.DocumentData )
var pdf = await PDFJS.getDocument ({data: decodedBase64}) // Returns a target pdf
this.numPages = pdf.numPages ;
this.pdfSrc = `data:application/pdf;base64,${res.data.DocumentData}`;
},
SCALEADD () {
if(this.scale == 300) return ;
this.scale += 10;
for(var i in this.$refs.pdf){
this.$refs.pdf[i].$el.style.width = parseInt(this.scale) + "%";
}
},
scaleReduce() {
if (this.scale == 100) {
return;
}
this.scale += -10;
for(var i in this.$refs.pdf){
this.$refs.pdf[i].$el.style.width = parseInt(this.scale) + "%";
}
}
},
}
These are the two methods of treatment, in order to look out wide, the second way the code a little less obvious, and the second, perfect to retain the clarity of documents; base64 bit so after the encounter with the PDF display on the second kind of it!
