uniapp移动端实现pdf预览

需要下载pdfjs 

 官网下载地址
https://mozilla.github.io/pdf.js/getting_started/#download

第一步
将文件放在static文件下
在这里插入,

修改源代码
1 pdf.js是不支持跨域文件加载的 直接加载是不会成功的。会报 “file origin doesnot match viewer”错误。 所以我们得改变一下源码。把下面图片上的三行注释掉。 

 2.如果我们的pdf需要在本地获取或者是文件服务器获取，我们就将这里直接去空。

<template>
<!--直接在新页面打开预览 -->

    <!-- <view style="width: 100%;" >
		     <web-view  :src="allUrl" class="pdfClass"></web-view>    				
		</view> -->

<!--如果是在已有的页面内插入 -->
	<iframe
	      width="100%"
	      height="500"
	      scrolling="no"
	      :src="allUrl"
	    ></iframe>
</template>

<script>
    export default {
        data() {
            return {
				src: '',
                allUrl:'',
				viewerUrl: '/static/pdfjs/web/viewer.html', // 格式化文件流的一个js 文件 
            }
        },
        onLoad(options) {
                let fileUrl = encodeURIComponent("pdf文件") // encodeURIComponent 函数可把字符串作为 URI 组件进行编码。
                this.allUrl = this.viewerUrl + '?file=' + fileUrl
          }
    }
</script>

<style>

</style>