vue项目内集成pdfJs

先上官网链接  PDF.js

       使用vue进行h5开发过程中，有时需要展示pdf，分享出来的页面，运行平台如果不支持pdf查看的话怎么办，pdfjs提供了很好的api，在这儿给大家提供两种方法以供参考。

效果分别如下：

                                 

第一种方法，缩放，跳转等等，都需自己额外调取及操作

第二种，则比较现成，样式也更接近浏览器自带的pdf预览。

 两种实现方法如下

1 引入pdfjs-dist，调取pdfjs api 将需要查看的pdf转化为canvas渲染。这个适合的场景为，页面有其他操作，局部空间来展示pdf。

<template>
    <div id="pdf-content">
        <div>
            <div id="pdfDiv" class="pdfDiv">
                <canvas v-for="page in pages" :id="'the-canvas'+page" :key="page"></canvas>
            </div>
        </div>
        <div class="button">
            <p><span class="btn" @click="clickFn(true)">+</span></p>
            <p><span class="btn" @click="clickFn(false)">-</span></p>