vue 预览pdf

vue 预览pdf 现成的轮子：

http://mozilla.github.io/pdf.js/

 

https://github.com/mozilla/pdfjs-dist

 

https://github.com/FranckFreiburger/vue-pdf

 

vue2 推荐使用vue-pdf

 

一丶安装

复制代码 隐藏代码 npm install pdfjs-dist@2.5.207

@后面加版本号，npm程序会下载固定版本的包。为啥要用这个版本，因vue-3.0中使用过高或者过低的版本，会报错。
因本人工作进度，也没详细去了解

二丶封装pdfjs-dist

复制代码 隐藏代码 找到node-modules>pdfjs-dist>es5文件夹 复制文件夹里面文件到public>static>pdf(新建pdf文件夹)

1.新建components>pdf>pdf.js (主要是对pdf封装)

复制代码 隐藏代码  

import getPdfjsDist from './getPdfjsDist'

    export default {
             name: 'Pdf',
                props: {
                url: {
                        type: String,
                        default: ''
                },
                type: {
                        type: String,
                        default: 'canvas'
                },
                pdfjsDistPath: {
                        type: String,
                        default: '.'
                }
        },
        data() {
                return {
                        pdfViewer: null,
                        pdfLinkService: null,
                        currentScale: 'page-width',
                        loadingTask: null
                }
        },

        methods: {
                onPagesInit({ source }) {
                        source.currentScaleValue = this.currentScale
                },
                async pdfLibInit() {
                        let pdfjsLib = window.pdfjsLib;
                        let pdfjsViewer = window.pdfjsViewer
                        if (!pdfjsLib || !pdfjsViewer) {
                                try {
                                        await getPdfjsDist(this.pdfjsDistPath)
                                        this.CMAP_URL = `${this.pdfjsDistPath}/pdf/cmaps/`;
                                        console.log( this.CMAP_URL)
                                        pdfjsLib = window.pdfjsLib;
                                        pdfjsLib.GlobalWorkerOptions.workerSrc = `${this.pdfjsDistPath}/pdf/build/pdf.worker.js`
                                        pdfjsViewer = window.pdfjsViewer
                                } catch (error) {
                                        // console.log(error)
                                        // pdfjs文件获取失败
                                        return
                                }
                        }

                        const container = this.$refs.container
                        const eventBus = new pdfjsViewer.EventBus();

                        // (Optionally) enable hyperlinks within PDF files.
                        const pdfLinkService = new pdfjsViewer.PDFLinkService({
                                eventBus: eventBus,
                        });
                        this.pdfLinkService = pdfLinkService
                        const pdfViewer = new pdfjsViewer.PDFViewer({
                                container: container,
                                eventBus: eventBus,
                                linkService: pdfLinkService,
                                renderer: this.type,
                                textLayerMode: 0,
                                downloadManager: new pdfjsViewer.DownloadManager({}),
                                enableWebGL: true
                        });
                        this.pdfViewer = pdfViewer
                        pdfLinkService.setViewer(pdfViewer);

                        eventBus.on("pagesinit", this.onPagesInit);
                },
                renderPdf() {
                        if (!this.url) { return }
                        // Loading document.
                        if (this.pdfViewer === null || this.pdfLinkService === null) {
                                return
                        }
                        if (this.loadingTask !== null) {
                                this.loadingTask.destroy()
                                this.loadingTask = null
                        }
                        this.loadingTask = window.pdfjsLib.getDocument({
                                cMapUrl: this.CMAP_URL,
                                cMapPacked: true,
                                url: this.url,
                        });
                        return this.loadingTask.promise.then((pdfDocument) => {
                                if (pdfDocument.loadingTask.destroyed || !this.url) { return }
                                this.pdfViewer.setDocument(pdfDocument)
                                this.pdfLinkService.setDocument(pdfDocument, null);
                                this.loadingTask = null
                        }).catch(error => {
                                console.log(error)
                        });
                }
        },
        mounted() {
                this.pdfLibInit().then(() => {
                        this.renderPdf()
                })
        },
        watch: {
                url() {
                        // 如果存在pdfViewer则取消渲染
                        if (this.pdfViewer) {
                                this.pdfViewer._cancelRendering()
                        }
                        this.renderPdf()
                }
        },
        render() {
                return (
                        <div class="pdf-view">
                                <div id="viewerContainer" ref="container">
                                        <div id="viewer" class="pdfViewer" />
                                </div>
                        </div>
                )
        }
}

2 新建components>pdf>getPdfjsDist(获取文件)

复制代码 隐藏代码

const getJavsScript = (src) => {
                return new Promise((resolve, reject) => {
                    const script = document.createElement('script')
                    script.onload = resolve
                    script.onerror = reject

                    script.src = src
                    document.body.append(script)
                })
            }
            const getCss = (href) => {
                return new Promise((resolve, reject) => {
                    const link = document.createElement('link')

                    link.onload = resolve
                    link.onerror = reject

                    link.setAttribute('rel', 'stylesheet')
                    link.setAttribute('type', 'text/css')
                    link.href=href
                    document.body.append(link)
                })
            }
            const getPdfjsDist = (pdfjsDistPath) => {
                return getJavsScript(`${pdfjsDistPath}/pdf/build/pdf.js`)
                .then(() => {
                    return Promise.all([
                        getJavsScript(`${pdfjsDistPath}/pdf/web/pdf_viewer.js`),
                        getCss(`${pdfjsDistPath}/pdf/web/pdf_viewer.css`)
                    ])
                })
            }
            export default getPdfjsDist

####  三丶页面使用

<template>
 <div style="width:100%;overflow:hidden;padding-top:50px">
 <!-- canvas渲染方式 -->
 <pdf :url="pdfUrl" :type="'canvas'" :pdfjsDistPath="'/static'" />
 </div>
 </div>
 </template>
 import pdf from "@/components/PDF/pdf";
 export default {
 components: {
 pdf
 },
 data() {
 return {
 pdfUrl: "",
 };
 },
 created() {
 this.pdfUrl = this.$route.query.src;
 }

复制代码 隐藏代码

备注：
关于印章不显示的问题

public>static>pdf>build>pdf.worker.js

 if (data.fieldType === "Sig") {
      data.fieldValue = null;
            // 注释下面这句话
      // _this3.setFlags(_util.AnnotationFlag.HIDDEN);
 }