移动端pdfH5预览，public/html页面实现

<head>
<link rel="stylesheet" href="/css/pdfh5.css">
    <script src="../js/pdf.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/pdf.worker.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8">        
    </script>
    <script src="../js/pdfh5.js" type="text/javascript" charset="utf-8"></script>
    <title>测试</title>
</head>

npm install pdfH5

在node_modules文件夹内找到需要引入的js和css文件

移入public文件夹内。

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

  mounted(){
                // pdfh5实例化时传两个参数：selector选择器，options配置项参数，会返回一个pdfh5实例对象，可以用来操作pdf，监听相关事件
                // pdfh5 = new Pdfh5(selector, options) goto初始到第几页，logo设置每一页pdf上的水印
                this.pdfh5 = new Pdfh5('#pdf', { pdfurl: this.pdfH5Url, goto: 1 })
                // 监听pdf准备开始渲染，此时可以拿到pdf总页数
                this.pdfh5.on('ready', function () {
                console.log('总页数:' + this.totalNum)
                })
                // 监听pdf加载完成事件，加载失败、渲染成功都会触发
                this.pdfh5.on('complete', (status, msg, time) => {
                console.log('状态:' + status + '，信息:' + msg + '，耗时:' + time + '毫秒')
                })
            },

 data:{                
        pdfh5: null,
        pdfH5Url:""
           },

pdfH5Url为该pdf文件的地址。

成功，

设置二维码qrCodeText为当前html页面地址。

移动端pdfH5预览，public/html页面实现

悦读