• 周五. 12月 9th, 2022

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

vue移动端预览pdf

admin

11月 28, 2021

vue-pdf移动端缺点:

1、安卓预览红头文件会出现缺字少字的问题,ios正常

2、预览过大文件,分页形式的好用,不分页的文件过大可能打不开

3、分页形式放大缩小只能通过按钮改变css放大,不分页无法放大

解决vue-pdf移动端问题使用pdfh5预览pfd:

  • 1.安装
npm install pdfh5
  • 2.使用
<template>
  <div id="app">
    <div id="demo"></div>
  </div>
</template>
<script>
  import Pdfh5 from "pdfh5";
  export default {
    name: 'App',
    data() {
      return {
        pdfh5: null
      };
    },
    mounted() {
        //实例化
      this.pdfh5 = new Pdfh5("#demo", {
        pdfurl: "http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf"
      });
      //监听完成事件
      this.pdfh5.on("complete", function (status, msg, time) {
        console.log("状态:" + status + ",信息:" + msg + ",耗时:" + time + "毫秒,总页数:" + this.totalNum)
      })
    }
  }
</script>

<style>
    @import "pdfh5/css/pdfh5.css";
    *{
    padding: 0;
    margin: 0;
    }
    html,body,#app {
     100%;
    height: 100%;
    }
</style>
  • 注意:如果css引用报错的话,按下面的方式引用。
import Pdfh5 from "pdfh5";
import "pdfh5/css/pdfh5.css";

异常问题汇总:

1、移动端设置meta ,否则影响展示 

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

 详情配置查看:https://gitee.com/pjjg/pdfh5

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注