vue项目中使用PDFJS阅读框架预览pdf文件

准备工作

1. 首先去PDFJS官网下载
   
2. 下载后，将其解压完存放在项目的public文件夹中，方便项目的打包
   

文件结构：

├── build/
│   ├── pdf.js                             - display layer
│   ├── pdf.js.map                         - display layer's source map
│   ├── pdf.worker.js                      - core layer
│   └── pdf.worker.js.map                  - core layer's source map
├── web/
│   ├── cmaps/                             - character maps (required by core)
│   ├── compressed.tracemonkey-pldi-09.pdf - PDF file for testing purposes
│   ├── debugger.js                        - helpful debugging features
│   ├── images/                            - images for the viewer and annotation icons
│   ├── locale/                            - translation files
│   ├── viewer.css                         - viewer style sheet
│   ├── viewer.html                        - viewer layout
│   ├── viewer.js                          - viewer layer
│   └── viewer.js.map                      - viewer layer's source map
└── LICENSE

方法一（iframe）以弹窗的形式

因为pdfjs的原页面是HTML，而我们要在Vue页面中使用，所以我们采用iframe将其内嵌到项目中以弹窗组件的形式展现。

1. iframe：

• 此处src里的地址是我们放在public里的viewrPdf.html文件地址，
• 然后我们在viewer.js中var file = 'file' in params ? params.file : DEFAULT_URL;可以确定链接的参数 file 参数就是需要的 渲染pdf 文件路径参数；
• 同时使用v-if='previewUrl' 在每次弹窗页面关闭后清除previewUrl，确保每次激活弹窗都能重新获取pdfjs页面元素

• src=“初始显示的页面或者图片”
• frameborder=“边框（一般为0）”
• width=“宽” height=“高”
• scrolling="是否滚动（一般为“no”)

2. encodeURIComponent()函数可把字符串作为 URI 组件进行编码。
3. previewUrl就是后端的下载 pdf 的 api

在methods中写下面方法:

因为这块是封装的组件，所以这里的参数都是由主控制器调用的时候传进来的；

1. baseUrl:开发环境的参数，具体根据后端api需求决定，不过一般都是process.env.VUE_APP_API_BASE_URL;
2. /api/console/${params.url}：这里则是后端api参数

在主控制器中引入我们封装好的pdfjs组件，再用点击方法调用该组件内的公共_show方法

<template>
	<div>
	<button @click='handleView'>PDF预览</button>
	</div>

 <pdf-view ref='pdfView'></pdf-view>
</template>
<script>
 import pdfView from "@/components/PDFJSView";
 components: {pdfjs}
 export default { 
 components: {pdfView},
 data() {
	return{}
  },
  methods: {
	handleView(){
	   this.$nextTick(()=>{         
	   	 this.$refs.pdfView._show(
	     {baseUrl:process.env.VUE_APP_API_BASE_URL,path:xx,url:'htInfo/file/'}
	 )}
  }
}
</script>

效果

方法二(window.open()) 打开新页形式

该方法不需要单独再封装组件，直接在主控制器中用window.open()的方式打开新页面

   handleView() {
      const url = '/api/console/htInfo/preview'
      window.open(
        process.env.VUE_APP_API_INI_URL +"/pdf/web/viewer.html?file=" +
         encodeURIComponent(process.env.VUE_APP_API_BASE_URL +url)
      );
    },

效果