关于pdfh5插件使用笔记

最近在做HaoYo项目中，需要将后台上传的pdf在用户端（h5）中展示为图片格式，便于学生浏览。

经过一顿互联网搜索大法后，找到了pdfh5这个插件，是基于pdf与JQuery封装的，用于h5的，支持双指缩放，分页等，并且上手使用非常简单，简单配置就可以达到想到的效果。

GitHub地址： https://github.com/gjTool/pdfh5

支持直接引用， npm安装方式两种（vue、react均适用）

以下仅记录在vue项目中使用的笔记。

下载插件

npm install pdfh5 -S

使用插件

template

<template>
    <div>
        ...
        <div id="pdf"></div>
        ...
    </div>
</template>

script

// 使用语法
new Pdfh5("元素名称（#pdf）", {pdfurl: pdf地址})

<script>
    import Pdfh5 from "pdfh5";    // 引入该组件
    import "pdfh5/css/pdfh5.css";    // 引入该组件的css style
    
    export default {
        methods: {
            pdf2img(pdfUrl) {
              this.$nextTick(() => {
              // 主要就这一句
                this.pdfh5 = new Pdfh5("#pdf", {
                  pdfurl: pdfUrl,    // pdf地址
                  withCredentials: true,    // 跨域
                })
              })
            }
        }
    }
</script>

我只遇到pdf跨域问题，通过nginx来解决跨域的

修改css style

我是直接写的全局css,直接把该插件的css覆盖掉

<style>
    // 修改pdf加载时顶部进度条颜色
    .pdfjs .loadingBar .progress .glimmer{
      background: #0091FF!important;
    }
</style>

其它

最近实在是无聊 没有工作干，自己也不想学，浑浑噩噩的，整天摸鱼滑水的。

各位大佬，有前端相关的活随时联系我，专业前端在线接活！

联系邮箱：zhanghaoran.ren@qq.com

2022-04-08 周五 晴