前端杂谈----vue pdf 预览

previewPdf.vue如下

<template>
  <div>
    <div>pdf预览</div>
    <pdf
      ref="pdf"
      v-for="i in numPages" 
      :key="i"  
      :src="url" 
      :page="i"
      ></pdf>
  </div>
</template>

<script>
import pdf from 'vue-pdf'
export default {
  name: '',
  components: {
    pdf
  },
  data() {
    return {
       url:"http://192.168.10.111:8080/group1/group1/XsUpload/220kV佑响46E3线220kV佑牵46E1线实时工况交叉跨越分析报告.pdf?name=220kV佑响46E3线220kV佑牵46E1线实时工况交叉跨越分析报告.pdf&download=1",
       numPages: null, // pdf 总页数
    }
  },
  computed: {},
  watch: {},
  mounted() {
      this.getNumPages()
  },  
  methods: {
      getNumPages() {
      // eslint-disable-next-line no-console
      console.info(55555)
      let loadingTask = pdf.createLoadingTask(this.url)
      loadingTask.promise.then(pdf => {
        this.numPages = pdf.numPages
      }).catch(err => {
        // eslint-disable-next-line no-console
        console.info('pdf 加载失败', err);
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

           

后端只要给个地址 前端就可以进行正常访问了。这个没有进行分页而是直接全部进行显示的