前端雜談----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>

           

後端隻要給個位址 前端就可以進行正常通路了。這個沒有進行分頁而是直接全部進行顯示的