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>

效果:

相关推荐
山河木马14 分钟前
前端学C++可太简单了:双冒号 :: 操作符
前端·javascript·c++
3Katrina15 分钟前
前端面试之防抖节流(二)
前端·javascript·面试
前端进阶者21 分钟前
天地图编辑支持删除编辑点
前端·javascript
江号软件分享30 分钟前
无接触服务的关键:二维码生成识别技术详解
前端
江号软件分享31 分钟前
如何利用取色器实现跨平台色彩一致性
前端
灰海34 分钟前
封装WebSocket
前端·网络·websocket·网络协议·vue
前端小巷子1 小时前
深入理解TCP协议
前端·javascript·面试
万少1 小时前
鸿蒙外包的十大生存法则
前端·后端·面试
顽疲1 小时前
从零用java实现 小红书 springboot vue uniapp(13)模仿抖音视频切换
java·vue.js·spring boot
江号软件分享2 小时前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端