移动端预览 PDF

最新推荐文章于 2025-04-30 16:10:24 发布

前端小芬芬

最新推荐文章于 2025-04-30 16:10:24 发布

阅读量891

点赞数

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

本文链接：https://blog.youkuaiyun.com/yf18040578780/article/details/131284825

版权

该文章展示了如何在Vue.js应用中集成pdfh5库，通过创建一个新的Vue组件，加载指定的PDF文件URL（例如http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf），实现在网页上预览PDF文档的功能。当pdfh5渲染成功时，会在控制台输出pdf渲染成功的信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

参考地址