移动端预览 PDF

最新推荐文章于 2024-03-29 11:23:24 发布

前端小芬芬

最新推荐文章于 2024-03-29 11:23:24 发布

阅读量776

点赞数

文章标签： javascript 数学建模开发语言

本文链接：https://blog.csdn.net/yf18040578780/article/details/131284825

版权

npm i pdfh5

<template>
  <div class="pdfBox">
    <div id="previewPdf"></div>
  </div>
</template>
<script>
import pdfh5 from 'pdfh5';
import 'pdfh5/css/pdfh5.css'
export default {
  name: 'pdfh5',
  data () {
    return {
      pdfh5: null,
    }
  },
  mounted() {
    this.openPdf()
  },
  methods: {
    openPdf(url){     //url：PDF文件地址
      this.pdfh5 = new pdfh5('#previewPdf', {
        pdfurl: 'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf'
      });
      this.pdfh5.on('success', ()=>{
        console.log('pdf渲染成功');
      });
    }
  }
}
</script>
<style  scoped lang="less">
.pdfBox {
  position: relative;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  overflow: hidden;
  z-index: 99;
  #previewPdf {
    height: 100vh;
  }
}
</style>

参考地址