pdf.js

下载pdf.js

<style>
    .contract-modal {
        position: absolute;
        right: 15%;
        width: 1000px;
        overflow: scroll;
        background: rgba(139, 148, 171, 0.7);
        padding: 20px 0 0;
        z-index: 900;
    }
    .contract-modal .contract-detail {
        margin: 0 auto;
        max-width: 96%;
        height: auto;
    }

    #mycanvas {
        min-height: 50vh;
        background: #fff;
    }
    canvas{
        margin: 0 auto;
        display: block;
        border-bottom:2px solid #aaa;
    }
</style>

<template>
    <div class="contract-modal">
        <div class="contract-detail"
                id="contractDetail">
            <div id="mycanvas" ref="mycanvas"></div>
        </div>
    </div>
</template>

<script>
    import pdf from '../../static/pdf/build/pdf'
    export default {
        name: 'md-contract',
        data () {
            return {}
        },
        methods: {
            getPage (pdf,pageNumber,container,numPages) { //获取pdf
                let _this = this
                pdf.getPage(pageNumber).then((page) => {
                    let scale = (container.offsetWidth/page.view[2])
                    let viewport = page.getViewport(scale)
                    let canvas = document.createElement("canvas")
                    canvas.width= viewport.width
                    canvas.height= viewport.height
                    container.appendChild(canvas)
                    let ctx = canvas.getContext('2d');
                    var renderContext = {
                        canvasContext: ctx,
                        transform: [1, 0, 0, 1, 0, 0],
                        viewport: viewport,
                        intent: 'print'
                    };
                    page.render(renderContext).then(() => {
                        pageNumber +=1
                        if(pageNumber<=numPages) {
                            _this.getPage(pdf,pageNumber,container,numPages)
                        }
                    })
                })
            },
            getPdf () {
                // 此中方式接受流形式返回
                let url = '/static/english.pdf'
                let pdfjsLib = pdf
                pdfjsLib.PDFJS.workerSrc = '/static/pdf/build/pdf.worker.js'
                let loadingTask = pdfjsLib.getDocument(url)
                loadingTask.promise.then((pdf) =>{
                    let numPages = pdf.numPages
                    let container = document.getElementById('mycanvas')
                    let pageNumber = 1
                    this.getPage(pdf,pageNumber,container,numPages)
                }, function (reason) {
                    alert(reason)
                });
            }
        },
        created () {
            this.getPdf()
        }
    }
</script>

标签：canvas,container,js,let,pageNumber,pdf,viewport
来源： https://www.cnblogs.com/corvus/p/14961108.html