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

最新推荐文章于 2025-04-03 16:21:42 发布

原创最新推荐文章于 2025-04-03 16:21:42 发布 · 226 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #node.js #npm #es6

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

12 篇文章

订阅专栏

本文介绍如何使用vue-pdf插件实现PDF文档的在线预览功能。通过安装依赖包并结合模板文件，可以轻松地将PDF文件加载到网页中，并支持获取PDF文件的总页数。

在项目中用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>