index.vue

<template>
    <div class="wrapper">
        <template v-for="page in pages">
            <canvas :id="ID_Prefix + page" :key="page"></canvas>
        </template>
    </div>
</template>
<script>
const pdfViewerPath = '/static/plugins/pdfviewer/'
const ID_Prefix = 'pdfviewer-canvas'
export default {
    props:{
        url: [String, Object, ArrayBuffer]
    },
    data(){
        return {
            pages: 1,
            ID_Prefix: ID_Prefix
        }
    },
    created(){
        if(!window.pdfjsLib){
            var hm = document.createElement("script");
            hm.src = pdfViewerPath + "js/pdf.js";
            hm.onload = () => {
                this.redenrPdf()
            }
            hm.onerror = function(err){
                alert('pdfjs加载出错')
            }
            var s = document.getElementsByTagName("script")[0];   
            s.parentNode.insertBefore(hm, s);
        }else this.redenrPdf()
    },
    methods:{
        // 多页数组
        getDataURLs(){
            let arr = []
            for(let i =1;i<= this.pages; i++){
                let el = document.getElementById(ID_Prefix + i)
                el.getContext('2d')
                arr.push(el.toDataURL('image/png'))
            }
            return arr;
        },
        redenrPdf(){
            //
            // The workerSrc property shall be specified.
            //
            let pdfjsLib = window.pdfjsLib
            pdfjsLib.GlobalWorkerOptions.workerSrc = pdfViewerPath + 'js/pdf.worker.js';
            /* pdfjsLib.GlobalWorkerOptions.useWorkerFetch = true
            pdfjsLib.GlobalWorkerOptions.cMapUrl = pdfViewerPath + 'cmaps/' */
            //
            // Asynchronous download PDF
            //
            const loadingTask = pdfjsLib.getDocument({
                data: this.url,
                useWorkerFetch: true,
                cMapUrl: pdfViewerPath + 'cmaps/'
            });
            (async () => {
                const pdf = await loadingTask.promise;
                window.pdf2 = pdf
                this.pages = pdf.numPages
                this.$nextTick(async () => {
                    for(let i=1; i <= this.pages; i++){
                        let page = await pdf.getPage(i);
                        let scale = 1.5;
                        let viewport = page.getViewport({ scale });
                        // Support HiDPI-screens.
                        let outputScale = window.devicePixelRatio || 1;

                        //
                        // Prepare canvas using PDF page dimensions
                        //
                        const canvas = document.getElementById(ID_Prefix + i);
                        const context = canvas.getContext("2d");

                        canvas.width = Math.floor(viewport.width * outputScale);
                        canvas.height = Math.floor(viewport.height * outputScale);
                        canvas.style.width = Math.floor(viewport.width) + "px";
                        canvas.style.height = Math.floor(viewport.height) + "px";

                        const transform = outputScale !== 1 
                        ? [outputScale, 0, 0, outputScale, 0, 0] 
                        : null;

                        //
                        // Render PDF page into canvas context
                        //
                        const renderContext = {
                            canvasContext: context,
                            transform,
                            viewport,
                        };
                        page.render(renderContext);
                    }
                })
            })();
        }
    }
}
</script>
<style scoped lang="scss">
.wrapper{
    text-align: center;
    canvas{
        display: block;
        border: 1px solid #333;
        margin: 5px auto;
    }
}
</style>