| pdfh5在线预览 （建议使用谷歌浏览器F12手机模式打开预览） |
| 来源：智睿 浏览：743 次 发布时间：2023-10-11 10:03:57 |
pdfh5在线预览 （建议使用谷歌浏览器F12手机模式打开预览） https://github.com/gjTool/pdfh5
pdfh5在线预览 （建议使用谷歌浏览器F12手机模式打开预览）
快速使用（有两种方式）一、script标签引入方式（需下载本项目文件夹css/pdfh5.css、js内所有文件）
<link rel="stylesheet" href="css/pdfh5.css" />
<div id="demo"></div>
<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>
var pdfh5 = new Pdfh5('#demo', { pdfurl: "./default.pdf" });
二、npm安装方式（适应于vue）, react使用方法类似vue（example/react-test是react使用示例）
npm install pdfh5
<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>
import Pdfh5 from "pdfh5"; import "pdfh5/css/pdfh5.css";
|
| 【刷新页面】【加入收藏】【打印此文】 【关闭窗口】 |
| 上一篇：H5网页Word、Excel、PPT、PDF在线预览解决方案 下一篇：网页实现前端简单实现在线预览pdf、word、xls、ppt等文件 |
