脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → pdfh5.js使用及踩坑

pdfh5.js的使用方法以及解决遇到的坑

 更新时间：2024年02月03日 11:43:40   作者：爱分享的Hayes小朋友  
这篇文章主要给大家介绍了关于pdfh5.js的使用方法以及解决遇到的坑的解决办法,pdfh5.js基于pdf.js和jQuery,web/h5/移动端PDF预览手势缩放插件,需要的朋友可以参考下

pdfh5.js的使用以及遇到的坑

pdfh5的地址：https://www.npmjs.com/package/pdfh5

  • 在项目中引入pdfh5
 // 通过npm在项目中引入
 
  npm install pdfh5
  import Pdfh5 from "pdfh5";
  import "pdfh5/css/pdfh5.css";
  
   // 注意：css样式也在script标签里通过import引入
   
// 使用

// 1.创建一个div
<div id='pdf'></div>

// 2.实例化
this.pdfh5 = new Pdfh5('#pdf',{
    // pdfurl和data二选一
	pdfurl:'pdf的路径'，
	data:pdf文件流 // array，如果是base64编码，需要先使用atob()转为二进制字符串
	})
	
// 3.监听完成事件
this.pdfh5.on('事件名',function())

完成事件on函数的事件名

遇到的坑

  • 引入css的坑
    在引入css文件的时候，官方给出了两种方式
    第一种：在style标签里面通过@import 'pdfh5/css/pdfh5.css’方式，这种方式可能会报错
    第二种：在script标签里面通过import ‘pdfh5/css/pdfh5.css’，建议使用这种方式
  • 关于大文件加载切换问题
    当pdf文件过大，有很多页的时候，打开pdf会处于慢慢加载的状态
    如果没有加载完成，再次点击另外一个pdf，就会出现pdf样式错乱的问题

    因此，我们在每次重新打开pdf的时候，执行一下销毁的操作
if (this.pdfh5) {
        this.pdfh5.destroy()
        this.pdfh5 = null
      }

3. 在那种需要切换的场景，会出现点击空白的情况

比如：‘我已阅读并同意xxx协议、xx协议’，点击一个协议，就会弹出一个pdf

// 在创建div的时候，id需要随之切换，如果id固定不变就会导致点击其他的出现空白情况

// html，容器通过v-if就行切换
<div class="content" id="medical-zygz_b" v-if="code === 'zygz_b'"></div>
<div class="content" id="medical-lpxz_b" v-if="code === 'lpxz_b'"></div>
// 或者动态绑定id的值
<div class="content" :id="'medical-'+code" v-if="code === 'lpxz_b'"></div>


// js
this.pdfh5 = new Pdfh5(`#medical-${this.code}`, {
    pdfurl: url,
})

这些都是基本用法，其他详细的api，可以去官网查看，地址在顶部第二行

总结

到此这篇关于pdfh5.js的使用方法以及解决遇到的坑的文章就介绍到这了,更多相关pdfh5.js使用及踩坑内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • js实现0ms延时定时器的几种方式

    js实现0ms延时定时器的几种方式

    本文主要介绍了js实现0ms延时定时器的几种方式，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-07-07
  • JavaScript中Array的实用操作技巧分享

    JavaScript中Array的实用操作技巧分享

    最近在调试JSP页面时频繁与ajax打交道，在复杂场景下，ajax传参数就需要对大量参数进行处理。这时我才发现，熟练Array的处理真的会使开发轻松不少！！下面就给大家分享下JavaScript中Array的实用操作技巧，有需要的可以参考借鉴。
    2016-09-09
  • 简单谈谈ES6的六个小特性

    简单谈谈ES6的六个小特性

    ES6（ECMAScript2015）的出现，无疑给前端开发人员带来了新的惊喜，它包含了一些很棒的新特性，可以更加方便的实现很多复杂的操作，提高开发人员的效率。JS社区的每个人都喜欢新的API、语法以及一些简单、明了更高效的完成重要任务的新特性。下面来一起看看吧。
    2016-11-11
  • 十个优秀的Ajax/Javascript实例网站收集

    十个优秀的Ajax/Javascript实例网站收集

    今天，要向大家推荐10个相当棒的Ajax和Javascript国外资源网站或博客，它们提供了相当多的高质量Ajax、Javascript实例及教程，喜欢Ajax和Javascript的朋友绝对不能错过。
    2010-03-03
  • javascript制作坦克大战全纪录（1）

    javascript制作坦克大战全纪录（1）

    本文写作的目的是巩固一下自己最近学习的js知识, 这个教程适合熟悉js基本语法和面向对象语法的小伙伴学习。由于自己也是刚学js不久，所以难免出现错误。如果发现希望给予指正。
    2014-11-11
  • js判断输入字符串是否为空、空格、null的方法总结

    js判断输入字符串是否为空、空格、null的方法总结

    下面小编就为大家带来一篇js判断输入字符串是否为空、空格、null的方法总结。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • 在 JavaScript 中用下划线替换空格的方法

    在 JavaScript 中用下划线替换空格的方法

    这篇文章主要介绍了在 JavaScript 中用下划线替换空格的方法,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-05-05
  • 详解webpack4.x之搭建前端开发环境

    详解webpack4.x之搭建前端开发环境

    这篇文章主要介绍了详解webpack4.x之搭建前端开发环境，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • 基于touch.js手势库+zepto.js插件开发图片查看器（滑动、缩放、双击缩放）

    基于touch.js手势库+zepto.js插件开发图片查看器（滑动、缩放、双击缩放）

    这篇文章主要为大家详细介绍了touch.js手势库结合zepto.js插件开发图片查看器，图片可以实现滑动、缩放、双击缩放等效果，
    2016-11-11
  • JavaScript算法教程之sku（库存量单位）详解

    JavaScript算法教程之sku（库存量单位）详解

    这篇文章主要给大家介绍了JavaScript算法教程之sku（库存量单位）的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。
    2017-06-06

最新评论