项目实现在线预览PDF，一开始用了pdf.js没能成功；后来才发现vue-pdf使用起来最简单,直接上demo
下载
npm i vue-pdf
引入(在所需要预览的页面)
<script>
import axios from 'axios'
import pdf from 'vue-pdf'
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js' // 加载中文的包
export default {
components: {
pdf
},
data () {
return {
numPages:''，
url:''，
src:''，
path:'',//pdf的地址，例如：/testFile.pdf
}
},
created(){
this.url = axios.defaults.baseURL; // 项目当前的域名
this.src = pdf.createLoadingTask({
// url:'http://localhost:8080'+this.path,// 此行是为了在本地跑项目的时候能够加载出来，仅用于开发显示
url:this.url+this.path,//正式环境用这个！
CMapReaderFactory
})
// 让所有页数一次性加载完，否则就只会加载第一页
this.src.then(pdf => {
this.numPages = pdf.numPages
}).catch(() => {
})
},
}
</script>
this.url一定要是当前项目的域名，否则会报跨域，请确保this.url+this.path是能够在浏览器访问的
例如：http://test.com/testFile.pdf
html部分
<template>
<div class="scrollBox">
<div v-for="i in numPages" :key="i">
<pdf :src="src" :page="i"></pdf>
</div>
</div>
</div>
</template>
若只写<pdf :src="src"></pdf>，仅加载第一页
效果如图
1.png
