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

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

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

前言

使用vue-pdf組件實現(xiàn)文件預覽功能并在文件上增加操作按鈕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、數(shù)據(jù)處理單頁

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
  });

總結

到此這篇關于vue中使用vue-pdf組件實現(xiàn)文件預覽及相應報錯解決的文章就介紹到這了,更多相關vue vue-pdf實現(xiàn)文件預覽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

詳解vue-cli3使用
這篇文章主要介紹了詳解vue/cli 3使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-08-08
解決vite打包后白屏之router-view不生效問題
這篇文章主要介紹了解決vite打包后白屏之router-view不生效問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-07-07
vue.js template模板的使用(仿餓了么布局)
這篇文章主要介紹了vue.js template模板的使用，主要是模仿餓了么布局，用到了4個組件，分別是header.vue,goods.vue,ratings.vue,seller.vue，感興趣的朋友跟隨腳本之家小編一起看看實現(xiàn)代碼
2018-08-08
vue如何在引入的el-tree前添加圖標
這篇文章主要介紹了vue如何在引入的el-tree前添加圖標問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue?底部footer導航組件問題
這篇文章主要介紹了vue?底部footer導航組件問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
基于Vue3自定義實現(xiàn)圖片翻轉預覽功能
這篇文章主要為大家詳細介紹了如何基于Vue3自定義實現(xiàn)簡單的圖片翻轉預覽功能,文中的示例代碼講解詳細,具有一定的學習價值,有需要的小伙伴可以參考一下
2023-10-10
vue/Element?UI實現(xiàn)Element?UI?el-dialog自由拖動功能實現(xiàn)
最近工作上需要在el-dialog基礎上進行些功能的改動,下面這篇文章主要給大家介紹了關于vue/Element?UI實現(xiàn)Element?UI?el-dialog自由拖動功能實現(xiàn)的相關資料,需要的朋友可以參考下
2023-06-06
Vue-cli中為單獨頁面設置背景色的實現(xiàn)方法
下面小編就為大家分享一篇Vue-cli中為單獨頁面設置背景色的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
el-table?fixed固定列導致錯位的解決方法介紹
ElementUI中el-table設置指定列固定不動,不受滾動條影響,下面這篇文章主要給大家介紹了關于el-table?fixed固定列導致錯位的解決方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-11-11
前端vue實現(xiàn)的h5頁面接入微信支付流程(jsapi方式)
vue實現(xiàn)微信支付有三種方式,第一種方式是PC端支付,第二種方式是H5支付,第三種方式是微信公眾號支付,這篇文章主要給大家介紹了關于前端vue實現(xiàn)的h5頁面接入微信支付流程,文中介紹的方法是利用jsapi方式,通過代碼將實現(xiàn)的方法介紹的非常詳細,需要的朋友可以參考下
2024-01-01