处理移动端pdf展示问题

npm install pdfjs-dist --save  //安装

<canvas v-for="page in pdfList" :id="'the-canvas'+page" :key="page"></canvas>

<script>

import PDFJS from "pdfjs-dist";

import pdfjsLib from "pdfjs-dist";

export default {

data(){

return {

pdfDoc: null,

pdfList: 0

}

},

mounted() {

this.initThePDFJSLIB();

let url = ''

console.log(url);

this.loadFile(url);

},

methods: {

// 初始化pdfjs

initThePDFJSLIB() {

pdfjsLib.GlobalWorkerOptions.workerSrc = "pdfjs-dist/build/pdf.worker.js";

},

_renderPage(num) {

this.pdfDoc.getPage(num).then(page => {

let canvas = document.getElementById("the-canvas" + num);

let ctx = canvas.getContext("2d");

let dpr = window.devicePixelRatio || 1;

let bsr =

ctx.webkitBackingStorePixelRatio ||

ctx.mozBackingStorePixelRatio ||

ctx.msBackingStorePixelRatio ||

ctx.oBackingStorePixelRatio ||

ctx.backingStorePixelRatio ||

1;

let ratio = dpr / bsr;

let viewport = page.getViewport(

screen.availWidth / page.getViewport(1).width

);

canvas.width = viewport.width * ratio;

canvas.height = viewport.height * ratio;

canvas.style.width = viewport.width + "px";

canvas.style.height = viewport.height + "px";

ctx.setTransform(ratio, 0, 0, ratio, 0, 0);

let renderContext = {

canvasContext: ctx,

viewport: viewport

};

page.render(renderContext);

if (this.pdfList > num) {

this._renderPage(num + 1);

}

});

},

loadFile(base64Str) {

PDFJS.getDocument({data:  ///data对象可以换成url

　　atob(base64Str),

　　cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.943/cmaps/',

　　cMapPacked: true

　　}).then(pdf => {

　　this.pdfDoc = pdf;

　　this.pdfList = this.pdfDoc.numPages;

　　this.$nextTick(() => {

　　this._renderPage(1);

　　});

});

}

},

components: {

}

};

</script>

<style lang="scss" scoped>

canvas {

display: block;

border-bottom: 1px solid black;

}

</style>

但最后因为电子签章问题还是换成图片的base64了(电子签章可以处理出来但样式乱了)

在build的pdf.worker.js中注释下就行了

if (data.fieldType === 'Sig') {

data.fieldValue = null;

//_this2.setFlags(_util.AnnotationFlag.HIDDEN);

}

转载于:https://www.cnblogs.com/hr-cmbc/p/11341422.html