VUE项目中实现PDF预览

首先安装插件：npm install pdfjs-dist --save。

在页面中引入：

import PDFJS from 'pdfjs-dist';

添加canvas标签：

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

设置pdf的url地址，这里的地址是放到浏览器的地址栏里可以下载的：

let pdfUrl = 'https://ecs7.tokopedia.net/instant-loan/file/29a2218e-bef9-44cb-b92b-8e81bc4d5228_DOC-20171013-WA0035.pdf';

data里写入必要的变量：

data () {
    return {
        pdfDoc: null,
        pdfPages: null
    }
}

获取pdf文件方法：

loadPdf () {
    PDFJS.getDocument(pdfUrl).promise.then((pdf) => {
        console.log('------------------', pdf);
        this.pdfDoc = pdf;
        this.pdfPages = this.pdfDoc.numPages;
        this.$nextTick(() => {
            this.renderPdfPage(1);
        });
    });
}

绘制pdf页面：

        renderPdfPage(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.pdfPages > num) {
                    this.renderPdfPage(num + 1);
                }
            });
        },

下面为完整代码：

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

<script>
import PDFJS from 'pdfjs-dist';
let pdfUrl = 'https://ecs7.tokopedia.net/instant-loan/file/29a2218e-bef9-44cb-b92b-8e81bc4d5228_DOC-20171013-WA0035.pdf';

export default {
    data () {
        return {
            pdfDoc: null,
            pdfPages: null
        }
    },
    created () {
        this.loadPdf();
    },
    methods: {
        loadPdf () {
            PDFJS.getDocument(pdfUrl).promise.then((pdf) => {
                console.log('------------------', pdf);
                this.pdfDoc = pdf;
                this.pdfPages = this.pdfDoc.numPages;
                this.$nextTick(() => {
                    this.renderPdfPage(1);
                });
            });
        },
        renderPdfPage(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.pdfPages > num) {
                    this.renderPdfPage(num + 1);
                }
            });
        },
    }
}
</script>

原文：https://www.jianshu.com/p/b48af7917656