在项目中用vue-pdf实现在线预览

最新推荐文章于 2024-07-03 13:30:10 发布

余一痴

最新推荐文章于 2024-07-03 13:30:10 发布

阅读量179

点赞数

分类专栏：项目中遇到的问题文章标签： vue.js node.js npm es6

本文链接：https://blog.csdn.net/yycnf/article/details/116753954

版权

项目中遇到的问题专栏收录该内容

12 篇文章 0 订阅

订阅专栏

在项目中用vue-pdf实现在线预览

首先我们下载vue-pdf依赖包：npm/cnpm i vue-pdf --save

第二部：我们在模板文件中使用

<template>
  <div id="remoteSignature-pages-videoAuthenticationDetails-videoAuthenticationDetails">
    <pdf v-for="i in numPages" :key="i" :src="pdfSrc" 
    :page="i" ref="myPdfComponent"></pdf>
  </div>
</template>

<script>
import pdf from 'vue-pdf';
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js';// 解决部分文字不显示的问题
export default {
    components: {
       pdf,
    },
    data{
        retuen{
             pdfSrc: '',//pdf路径
             numPages: 1  //  pdf 文件总页数    
        }
    },
    mounted(){
        //在这里请求后台接口，返回pdf的路径/pdf的base64格式的文件流
    },
    methods:{
        GetProtocolQueryBase(basePath){//协议预览
         let datas = 'data:application/pdf;base64,' + basePath;
         this.pdfSrc = pdf.createLoadingTask({ url: datas, CMapReaderFactory });
         this.pdfSrc.promise.then(pdf => {
           this.numPages = pdf.numPages;
         }).catch(err=>{
           console.log("pdf加载失败",err);
        });
       },
    }
    
}
</script>

<style lang="less">

</style>