pdf显示的方法
方法一
使用embed标记来使用浏览器自带的pdf工具。
这种实现方式优缺点都很明显：
优点：自带“打印”，“搜索”，“翻页”等功能，强大且实现方便。
缺点：不同浏览器的pdf工具样式不一，且无法满足个性化需求，比如：禁止打印，下载等。
方法二
使用Mozilla的PDF.js，自定义展示PDF。
基础功能集成
使用Text-Layers渲染(可实现pdf内容复制)
什么是PDF.JS
PDF.js是基于HTML5技术构建的，用于展示可移植文档格式的文件(PDF)，它可以在现代浏览器中使用且无需安装任何第三方插件。
安装：
npm install pdfjs-dist基础功能有两个必须引用的文件：
pdf.js
pdf.worker.js
如果使用CDN的方式，直接引用如下对应文件即可：
https://mozilla.github.io/pdf.js/build/pdf.js
https://mozilla.github.io/pdf.js/build/pdf.worker.js
如果使用npm的方式，则在需要使用PDF.js的文件中如下引用:
import PDFJS from 'pdfjs-dist';PDFJS.GlobalWorkerOptions.workerSrc = 'pdfjs-dist/build/pdf.worker.js';
这两个文件包含了获取、解析和展示PDF文档的方法，但是解析和渲染PDF需要较长的时间，可能会阻塞其它JS代码的运行。
为解决该问题，pdf.js依赖了HTML5引入的Web Workers——通过从主线程中移除大量CPU操作（如解析和渲染）来提升性能。
PDF.js的API都会返回一个Promise，使得我们可以优雅的处理异步操作。
使用
本文章只介绍在vue中的使用, 下面是自己写的展示pdf的组件可以直接拿去用
注：具体解释请看下面代码中的注释
<template>
<!--<button @click="scalBig">放大</button>-->
<!--<button @click="scalSmall">缩小</button>-->
<!--<p>页码：{{`${pageNo}/${totals.length}`}}</p>-->
<div class="drag-box" id="dragBox" @scroll="scrollfun($event)">
<el-scrollbar style="height: 100%;overflow-y: hidden;">
<div class="wrapper" id="pdf-container">
<div v-for="item in totals" :id="`page-${item}`" :key="item" class="pdf-box">
<canvas :id="'canvas-pdf-' + item" class="canvas-pdf"></canvas>
</div>
</div>
</el-scrollbar>
</div>
</template><script>
import PDFJS from 'pdfjs-dist'
import { TextLayerBuilder } from 'pdfjs-dist/web/pdf_viewer'
import 'pdfjs-dist/web/pdf_viewer.css'
export default {
name: 'showPdf',
props: ['pdfUrl'],
data () {
return {
