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; */
}
相关推荐
葡萄城技术团队1 天前
所有网站通用:6 行 HTML 代码搞定页面加载提速
html
糖糖TANG2 天前
从零开始制作我的第一个静态网页——教师节主题首页开发记录
html
前端老鹰2 天前
HTML <output> 标签:原生表单结果展示容器,自动关联输入值
前端·html
芦苇Z2 天前
HTML <a> 标签的 rel 属性全解析:安全、隐私与 SEO 最佳实践
前端·html
Alice-YUE3 天前
【CSS学习笔记3】css特性
前端·css·笔记·html
破无差3 天前
《赛事报名系统小程序》
小程序·html·uniapp
从零开始学习人工智能3 天前
快速搭建B/S架构HTML演示页:从工具选择到实战落地
前端·架构·html
yddddddy3 天前
html基本知识
前端·html
小白64023 天前
前端梳理体系从常问问题去完善-基础篇(html,css,js,ts)
前端·css·html
蓝胖子的多啦A梦4 天前
【前端】VUE+Element UI项目 页面自适应横屏、竖屏、大屏、PDA及手机等适配方案
前端·javascript·elementui·html·前端页面适配