vue-pdf在线预览pdf文件

  1. 安装vue-pdf
 cnpm i -D vue-pdf    // 
  1. 在页面中使用(.vue)
<template>
   <div>
   	<pdf  :src="srcPdf"/>
   </div>
 </template>
<script>
import pdf from 'vue-pdf' // 引入插件
  components: { pdf },
  data() {
    return {
      pdfsrc: '',  // pdf文件地址
         };
  }
};
</script>

即此时pdf文件展示,且只展示一页,
如需展示多页需使用createLoadingTask函数进行如下操作:
html代码改写为:

<pdf ref="pdf" v-for="i in page" :key="i" :src="srcPdf" :page="i"/>

js代码改写为:

<script>
import pdf from "vue-pdf";
export default {
  components: {
    pdf
  },
  data() {
    return {
      pdfUrl:"", //pdf文件路径
      page: 1,
      srcPdf:'' //需要预览得pdf
    }
  },
 mounted(){
 this.getDetails()
 },
  methods: {
    getDetails() {
      this.srcPdf = pdf.createLoadingTask(this.pdfUrl);
      this.srcPdf.then(pdf => {
              this.page = pdf.numPages;
            })
            .catch(err => {
              console.error("pdf加载失败");
            });
    },
  }
}
</script>

至此显示全部页面的pdf页面

引入vue-pdf遇到得问题:

  1. 页面提示,如下图
    在这里插入图片描述
    this.srcPdf为自己定义得变量,视自己情况而定
    解决方法: this.srcPdf后添加promise
 this.srcPdf.promise.then(pdf => {
              this.numPages = pdf.numPages;
            })
            .catch(err => {
              console.error("pdf加载失败");
            });

运行后提示取消,页面正常显示

Logo

前往低代码交流专区

更多推荐