下载

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