vue移动端使用(pdfh5) 组件预览PDF

发布时间 2023-04-24 12:15:07作者: 好大的虫子

1、安装插件

npm i pdfh5

2、在页面内引入组件

import Pdfh5 from "pdfh5";
import "pdfh5/css/pdfh5.css";

3、写一个展示pdf文件的容器

   <div id="pdfType"></div>

4、封装在事件中

 initPdf() {
            this.pdfh5 = ''
            this.pdfh5 = new Pdfh5("#pdfType", {
                pdfurl: this.dataObj.docFile, //pdf文件地址
                lazy: true, //是否懒加载,默认false
                renderType: 'canvas', // canvas、svg,默认canvas
                maxZoom: 3, //手势缩放最大倍数,默认3
                scrollEnable: true, //是否允许pdf滚动,默认true
                zoomEnable: true,// 是否允许pdf手势缩放,默认true
                limit: 0, //限制pdf加载最大页数,默认0不限制
            })
        },
5、在mounted中调用 initPdf() 事件
在created里面调用由于异步原因会报错"TypeError: Cannot read properties of undefined (reading 'pdfLoaded')"