pdfh5在线预览pdf文件

前言

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

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

使用pdfh5预览pdf

编写预览页面

<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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

下载需要用到的css和js文件
https://github.com/gjTool/pdfh5
请见Git仓库中寻找
访问网页测试

pdfh5 扩展API

见 https://gitee.com/gjTool/pdfh5#pdfh5js
在这里插入图片描述

遇到的问题

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

在这里插入图片描述
解决办法：找到pdfh5.css, 屏蔽height属性

.pdfjs .pdfViewer .pageContainer img {
    width: 100%;
    /*height: 100%;*/
    position: relative;
    z-index: 100;
	/* user-select:none; */
}
1
2
3
4
5
6
7

在这里插入图片描述

相比其它pdf预览方式优缺点

浏览器原生预览：浏览器直接解析预览pdf的清晰度最高，显示效果最好，但是存在pdf xss跨站攻击风险，pc和ios设备支持pdf的在线显示，但是android设备不支持在线显示。
pdfh5组件预览: 使用方法简单，在手机上支持手势缩放， pc，ios,android均支持显示，并且不会存在xss攻击，缺点是预览的清晰度低，内容模糊(相对而言)，对比原生的pdf预览，效果明显不好。
pdfjs组件预览: 相较于浏览器原生浏览的话，显示的清晰度差一点，但是比pdfh5的预览效果好很多，同时不存在pdf xss跨站攻击风险。

传送门

pdfjs在线预览组件的使用

相关阅读:
全网首发！马士兵内部共享—1658页《Java面试突击核心讲》
day43 基础知识练习
Fedora 24 Beta 版发布下载！
datagrip 相关数据连接信息无缝迁移
深度学习之基于YoloV5血红细胞检测识别系统
Java面试之JDK、JRE、JVM区别
5款免费的项目管理软件（推荐收藏）
netty系列之:netty中各不同种类的channel详解
Oracle for Windows安装和配置——Oracle for Windows数据库创建及测试
可解释的AI:用LIME解释扑克游戏

原文地址：https://blog.csdn.net/u011628753/article/details/132604135