vue中使用vue-pdf組件實現文件預覽及相應報錯解決

更新時間：2022年09月03日 14:05:19 作者：小任睡不醒`

在需求中,經常遇見pdf的在線預覽效果,很多pdf插件不支持vue3,或者是沒有集成翻頁放大縮小功能,比如vue-pdf,下面這篇文章主要給大家介紹了關于vue中使用vue-pdf組件實現文件預覽及相應報錯解決的相關資料,需要的朋友可以參考下

前言

使用vue-pdf組件實現文件預覽功能并在文件上增加操作按鈕vue3不支持vue-pdf，vue3項目用pdfjs-dist

一、安裝npm 依賴

1、在根目錄下輸入一下命令

npm i pdfjs-dist@2.5.207 --save
npm i vue-pdf@4.2.0 --save

2、修改pacakge.json文件

"dependencies": {
  "pdfjs-dist": "2.5.207",
  "vue-pdf": "4.2.0",
  },

二、引入組件

import pdf from 'vue-pdf'
 
export default {
  name: 'App',
  components: {
    pdf
  },
  ···
}

1、html中使用組件單頁

<pdf :src="file"></pdf>

多頁

<pdf v-for="i in pageNum" :key="i" :src="file" :page="i"></pdf>

2、數據處理單頁

export default {
  ···
  data () {
    return {
        file: "/pdf/test.pdf"
    }
  }
}

多頁

export default {
  ···
  data () {
    return {
      file: "/pdf/test.pdf",
      pageNum: 1
    }
  },
  methods: {
    getPageNum () {
      let loadingTask = pdf.createLoadingTask(this.file)
      loadingTask.promise.then(pdf => {
        this.pageNum = pdf.numPages
      }).catch(err => {
        console.error('pdf加載失敗', err);
      })
    }
  },
  mounted () {
    this.getPageNum()
  }
}

三、項目使用--代碼部分

<template>
  <div class="pdf_wrap">
    <pdf class="pdfView" v-for="item in pageNum" :key="item" :src="pdfUrl" :page="item"></pdf>
    <div class="btnCont">
      <div class="savebtn"
           @click="sign">確認</div>
    </div>
    </div>
</template>
 
<script>
import pdf from 'vue-pdf'
import { protocolGet } from "../../../api/validation/shareagreement";//調用的接口
export default {
  components: {
      pdf
  },
  props: {},
  data() {
    return {
      title: this.$route.meta?.title || '',
      pdfUrl:'',
      pageNum: 1
    }
  },
  watch: {},
  computed: {},
  methods: {
    getprotocolGet(){
      protocolGet().then((res)=>{
        if(res.code==200){
          this.pdfUrl= res.data.contractUrl//獲取到的協(xié)議展示
          this.getPageNum();//pdf分頁處理
        }
      })
    },
     getPageNum () {
      let loadingTask = pdf.createLoadingTask(this.pdfUrl,{withCredentials: false})
      loadingTask.promise.then(pdf => {
        this.pageNum = pdf.numPages
      }).catch(err => {
        console.error('pdf加載失敗', err);
      })
    },
    sign() {
      this.$router.push({
        path: '/xxx',
      })
    },
  },
  created() {
   this.getprotocolGet()
  },
  mounted() {
    
  },
}
</script>
<style>
.pdf_wrap{
  height: 100%;
  padding-bottom: 1.4rem;
  background-color: #fff;
}
</style>
<style  scoped>
.pdf_wrap .btnCont {
  position: fixed;
  bottom: 0rem;
  left: 0;
  background-color: #fff;
  padding: 0.1rem 0 .40rem 0;
  width: 100%;
  border: 0;
  text-align: center;
  
}
.pdf_wrap .btnCont .savebtn{
  color: #fff;
  display: inline-block;
  height: 0.8rem;
  line-height: 0.8rem;
  border-radius: 0.4rem;
  width: 6.9rem;
  margin: auto;
  font-size: 0.28rem;
  background-color: #ff0b95;
}
</style>

四、報錯解決

1、這種情況就是跨域了找后臺解決一下即可

2、這種情況是pdf還沒加載出來就去渲染導致頁面pageNum找不到，調用接口加載完成后再去渲染pageNum

3、報這個錯誤加上 {withCredentials: false} ，報錯就沒有了

補充：vue使用vue-pdf預覽開發(fā)正常，打包報錯work.js404

修改依賴文件node_modules下worker-loader里的index.js文件里路徑
代碼如下（示例）：

 const filename = _loaderUtils2.default.interpolateName(this, options.name || 'static/js/[hash].worker.js', {
    context: options.context || this.rootContext || this.options.context,
    regExp: options.regExp
  });