下载

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>，仅加载第一页