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在线预览组件的使用

相关阅读:
学习vue一些小记
使用Signposts分析App性能
access-list vs ip access-list
找树左下角的值路径总和从中序与后序遍历序列构造二叉树
AcWing 0x01. 语法基础课【Python3】版题解-内置数据结构/字符串
NodeJS 5分钟连接 Redis 读写操作
MAC版Lightroom Classic 2022(Lrc2022)v11.5已发布，支持M1/M2和Intel三种系统,解决无法成功安装等问题
TikTok环境设置教程，小白也能轻松上手‼️
java ssm大学教室管理系统springboot
【CSS】解决对齐的小问题

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