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>

效果:

相关推荐
袁煦丞26 分钟前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆27 分钟前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记38 分钟前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆38 分钟前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
最懒的菜鸟38 分钟前
MinerU将PDF转成md文件,并分拣图片
人工智能·pdf
用户214118326360239 分钟前
dify案例分享-Dify v1.6.0 重磅升级:双向 MCP 协议引爆 AI 生态互联革命
前端
程序员海军39 分钟前
AI领域又新增协议: AG-UI
前端·openai·agent
我想说一句41 分钟前
React待办事项开发记:Hook魔法与组件间的悄悄话
前端·javascript·前端框架
真夜42 分钟前
CommonJS与ESM
前端·javascript
LaoZhangAI42 分钟前
GPT-image-1 API如何传多图:开发者完全指南
前端·后端