pdfh5在线预览pdf文件

前言

pc浏览器和ios的浏览器都可以直接在线显示pdf文件,但是android浏览器不能在线预览pdf文件,如何预览pdf文件?

Github: https://github.com/gjTool/pdfh5

Gitee: https://gitee.com/gjTool/pdfh5

使用pdfh5预览pdf

  1. 编写预览页面
html 复制代码
<html>
<head>
    <meta charset="UTF-8">
    <title>pdfh5预览</title>
    <link rel="stylesheet" href="pdfh5/css/pdfh5.css"/>
    <link rel="stylesheet" href="pdfh5/css/style.css"/>
    <style type="text/css">

    </style>
</head>
<body>
<div id="demo"></div>
</body>
<script src="pdfh5/js/pdf.js" type="text/javascript" charset="utf-8"></script>
<script src="pdfh5/js/pdf.worker.js" type="text/javascript" charset="utf-8"></script>
<script src="pdfh5/js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="pdfh5/js/pdfh5.js" type="text/javascript" charset="utf-8"></script>
<script>
    var pdfh5 = new Pdfh5('#demo', {
        pdfurl: "./default.pdf" //可以是你的pdf链接地址/xxx/xxx.pdf
    });
</script>
</html>
  1. 下载需要用到的css和js文件
    https://github.com/gjTool/pdfh5

    请见Git仓库中寻找

  2. 访问网页测试

pdfh5 扩展API

https://gitee.com/gjTool/pdfh5#pdfh5js

遇到的问题

1. 显示页面高度很小,不正常显示

解决办法: 找到pdfh5.css, 屏蔽height属性

css 复制代码
.pdfjs .pdfViewer .pageContainer img {
    width: 100%;
    /*height: 100%;*/
    position: relative;
    z-index: 100;
	/* user-select:none; */
}
相关推荐
UNbuff_01 天前
HTML 各种事件的使用说明书
前端·html
@大迁世界2 天前
用 popover=“hint“ 打造友好的 HTML 提示:一招让界面更“懂人”
开发语言·前端·javascript·css·html
ssshooter2 天前
复习 CSS Flex 和 Grid 布局
前端·css·html
UNbuff_02 天前
HTML 中的 CSS 使用说明
css·html·tensorflow
wallflower20202 天前
Web Workers:前端多线程解决方案
性能优化·html
charlie1145141912 天前
前端三件套简单学习:HTML篇1
开发语言·前端·学习·html
正义的大古2 天前
OpenLayers常用控件 -- 章节六:全屏控件教程
前端·javascript·html·openlayers
OC溥哥9993 天前
Flask论坛与个人中心页面开发教程完整详细版
后端·python·flask·html
wangbing11253 天前
界面规范8-文字
前端·javascript·html
jingling5553 天前
uniapp | 解决组件样式不生效问题
前端·css·uni-app·html·学习方法