正在加载中...
信息详页
返回pdfh5在线预览 （建议使用谷歌浏览器F12手机模式打开预览）
pdfh5在线预览 （建议使用谷歌浏览器F12手机模式打开预览） https://github.com/gjTool/pdfh5
pdfh5在线预览 （建议使用谷歌浏览器F12手机模式打开预览）
快速使用（有两种方式）
一、script标签引入方式（需下载本项目文件夹css/pdfh5.css、js内所有文件）
- 1.引入css
<link rel="stylesheet" href="css/pdfh5.css" />
- 2.创建div
<div id="demo"></div>
- 3.依次引入js（需引用本项目的js,不要引用官方的pdf.js,jquery可以引用其它版的）
<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-2.1.1.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/pdfh5.js" type="text/javascript" charset="utf-8"></script>
- 4.实例化
var pdfh5 = new Pdfh5('#demo', { pdfurl: "./default.pdf" });
二、npm安装方式（适应于vue）, react使用方法类似vue（example/react-test是react使用示例）
- 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: "../../static/test.pdf", // cMapUrl:"https://unpkg.com/pdfjs-dist@3.8.162/cmaps/", // responseType: "blob" // blob arraybuffer }); //监听完成事件 this.pdfh5.on("complete", function (status, msg, time) { console.log("状态：" + status + "，信息：" + msg + "，耗时：" + time + "毫秒，总页数：" + this.totalNum) //禁止手势缩放 this.pdfh5.zoomEnable(false); }) } } </script> <style> @import "pdfh5/css/pdfh5.css";
*{ padding: 0; margin: 0; } html,body,#app { width: 100%; height: 100%; } </style>
- 注意：如果css引用报错的话，按下面的方式引用。
import Pdfh5 from "pdfh5"; import "pdfh5/css/pdfh5.css";