uni-app使用pdfjs插件预览pdf文件

pdfjs插件下载地址

pdf.js官方网站下载

效果预览

用法说明

插件下载下来为 pdfjs-3.6.172-legacy-dist.zip (以3.6.172为例)，解压包含 build 和 web 两个文件夹。将这两个文件夹复制到 uni-app项目/hybrid/html 目录下，如下所示：

uni-app-project/
├── hybrid
│	└── html	
│		├── 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
├── App.vue
├── manifest.json
├── package.json
├── package-lock.json
├── ...
└── pages.json

创建预览模板页面文件，以pdf-view.vue为例

<template>
  <view>
    <web-view :src="allUrl"></web-view>
  </view>
</template>
 
<script>
  export default {
     
     
    data() {
     
     
	  return {
     
     
	    viewerUrl: '/hybrid/html/web/viewer.html', 
		allUrl: ''
	  }
	},
	onLoad(options) {
     
     
		this.allUrl = this.viewerUrl + '?file=' + options.url
	}
  }
</script>

其他页面需要打开pdf文件的地方调用，以按钮点击clickRight()方法为例

clickRight(){
   
   
	var param = {
   
   
		"fileId":this.fileId
	};
	this.$API.getFileResource(param).then(res => {
   
   
		let pdfData = res; //pdfData是后端返回的文件流
		let blob = new Blob