模板网首页 > 建站教程 > vue教程,AngularJS教程 >  vue使用PDFObject的方法正文

vue使用PDFObject的方法

PDFObject是一款非常优秀的PDF在线预览js插件,在之前我爱模板网已经介绍过:pdfobject.js——一款在线预览PDF的js库。今天讲解它在vue中的使用方法:

1、肯定是先安装了:
npm i pdfobject --save
2、引入
import pdf from 'pdfobject'
3、指定元素与样式
<template>
    <div id="pdf-content">
    </div>
</template>
<style lang="scss" scoped>
#pdf-content{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 20%;
    background: #999;
}
</style>
4、一定要在mounted中调用,因为它必须等待dom元素渲染出来才能找到节点。
mounted(){
    pdf.embed("../../static/pdf.pdf", "#pdf-content");
}
小技巧:建议将上面的代码封装到一个组建当中,然后用dialog等方法打开,这样的话,按esc可以直接关闭,否则全屏的话会导致关闭不了。esc其实关闭的是dialog。下面是我爱模板网在工作中封装的一个组件:ViewPDF,这个组件还带提示:ESC可关闭PDF
<template>
  <div>
    <div class="pdf-tips" v-if="showTips">按“ESC”键可关闭PDF<el-button type="text"><i class="el-icon-close" @click="pdfTop=0; showTips=false"></i></el-button></div>
    <div id="pdf-content" :style="{top:pdfTop+'px'}"></div>
  </div>
</template>

<script>
import pdf from 'pdfobject'

export default {
  name: "ViewPDF",
  props: {
    pdfUrl: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      pdfTop:40,
      showTips:true
    }
  },
  created() {
  },
  methods: {
  },
  beforeMount() {
    var that = this;
    that.$nextTick(function () {
      pdf.embed(that.pdfUrl, "#pdf-content");
    })
  },
}
</script>

<style lang="scss" scoped>
.pdf-tips{
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    text-align: center;
    top:0;
    left:0;
    z-index: 999999999999;
    background: #fff;
}
#pdf-content{
    width: 100%;
    height: 100%;
    position: fixed;
    left:0;
    z-index: 999999999999;
    background: #999;
}
</style>
使用ViewPDF组件也很简单:

1、打开PDF按钮
<el-button @click="showPdf=true">打开pdf</el-button>
2、将ViewPDF放到dialog中:
<el-dialog :visible.sync="showPdf">
    <ViewPDF v-if="showPdf" :pdfUrl="pdfUrl"></ViewPDF>
</el-dialog>
3、导入ViewPDF组件
import ViewPDF from "@/components/ViewPDF";
4、在components中加入组件
components: {
    ViewPDF
},
5、设置data
data(){
    return {
        showPdf:false,
        pdfUrl:'http://abc.com/1.pdf'   //pdf路径
    }
}
0
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢