vue在线查看pdf文件

1.引入组件

javascript 复制代码
npm install --save vue-pdf

2、pdf组件页面模板

javascript 复制代码
<template>
  <div class="scrollBox" >
    <el-dialog   :visible.sync="open" :top="1"  width="50%" append-to-body>
        <div slot="title">
          <el-page-header @back="open =false" content="简历"></el-page-header>
        </div>
        <pdf v-for="item in numPages" :key="item" :src="pdfSrc" :page="item" ref="pdf"></pdf>
    </el-dialog>


  </div>
</template>

<script>
import pdf from 'vue-pdf'
export default {
  //你的页面路由名称
  name: "Resume",
  components: {
    pdf
  },
  data() {
    return {
      pdfSrc:null,//简历地址
      numPages: null, // pdf 总页数
      open:false,//开关
    };
  },
  methods: {
    show(url){
      //调用界面传过来简历的地址
       this.pdfSrc = url;
      // 计算pdf页码总数
       this.getNumPages();
       //打开弹出框
        this.open = true;
    },

    getNumPages() {
      let loadingTask = pdf.createLoadingTask(this.pdfSrc)
      loadingTask.promise.then(pdf => {
        this.numPages = pdf.numPages;

      }).catch(err => {
        console.error('pdf 加载失败', err);
      })
    },

  }
};
</script>

3、引入组件到你的页面

javascript 复制代码
<!-- 引入组件,ref:调用组件方法用  -->
<Resume ref="showResume"  :title="resumeTitle"></Resume>
import Resumefrom "@/views/business/common/resume";

//调用方法
toResume(resumeUrl){
			//resumeUrl简历地址
      this.$refs.showResume.show(resumeUrl);
    },

</script>

效果:

相关推荐
前端小巷子2 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹5 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器12 分钟前
指定阿里镜像原理
前端
枷锁—sha16 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha18 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜34 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20156 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss