当前位置： 首页 > news >正文

pdfh5在线预览pdf文件

news 2025/10/14 23:56:08

前言

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

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

使用pdfh5预览pdf

  1. 编写预览页面
<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属性

.pdfjs .pdfViewer .pageContainer img {width: 100%;/*height: 100%;*/position: relative;z-index: 100;/* user-select:none; */
}

在这里插入图片描述

相关文章：

pdfh5在线预览pdf文件

前言 pc浏览器和ios的浏览器都可以直接在线显示pdf文件&#xff0c;但是android浏览器不能在线预览pdf文件&#xff0c;如何预览pdf文件&#xff1f; Github: https://github.com/gjTool/pdfh5 Gitee: https://gitee.com/gjTool/pdfh5 使用pdfh5预览pdf 编写预览页面 <…...

编程日记 2023/9/5 12:36:49

Java智慧工地大数据中心源码

智慧工地技术架构&#xff1a;微服务JavaSpring Cloud VueUniApp MySql 智慧工地形成安全、质量、进度、人员、机械、绿色施工六大针对性解决方案。 安全管理 围绕重大危险源提供管控&#xff0c;可视化跟踪消防、安防、基坑、高支模、临边防护、卸料平台等设施设备的安全状态…...

编程日记 2023/9/5 12:35:48

关于人工智能的担忧

人工智能的快速发展引发了一系列关于其潜在风险和担忧的讨论。以下是一些常见的人们对人工智能的担忧&#xff1a; 失业问题&#xff1a;人工智能的出现可能会导致很多工作岗位的消失&#xff0c;特别是那些需要重复性劳动的工作。人们担心机器取代人类工作将导致大规模失业和社…...

编程日记 2023/9/5 12:34:47

JVM之强软弱虚引用

在Java虚拟机&#xff08;JVM&#xff09;中&#xff0c;有几种不同类型的引用&#xff0c;它们分别是&#xff1a;强引用&#xff08;Strong Reference&#xff09;、软引用&#xff08;Soft Reference&#xff09;、弱引用&#xff08;Weak Reference&#xff09;、虚引用&am…...

编程日记 2023/9/5 12:33:46

Python编程练习与解答 练习98：一个数是素数吗

质数是大于1的整数&#xff0c;它只能被1和它本身整除。编写一个函数&#xff0c;来确定他的参数是不是质数&#xff0c;如果是&#xff0c;则返回True&#xff0c;否则返回False。编写一个main程序&#xff0c;从用户那里读取一个整数并显示一条消息&#xff0c;指示它是不是质…...

编程日记 2023/9/5 12:32:42

vue3+ts+uniapp实现小程序端input获取焦点计算上推页面距离

vue3tsuniapp实现小程序端input获取焦点计算上推页面距离 input获取焦点计算上推页面距离 1.先说我这边的需求2.发现问题3.解决思路4.代码展示 自我记录 1.先说我这边的需求 需求 1.给键盘同级添加一个按钮例如’下一步’ or ‘确认’ 这种按钮 2.初步想法就是获取input焦点时…...

编程日记 2023/9/5 12:31:42

【2023集创赛】加速科技杯二等奖作品：基于ATE的电源芯片测试设计与性能分析

本文为2023年第七届全国大学生集成电路创新创业大赛&#xff08;“集创赛”&#xff09;加速科技杯二等奖作品分享&#xff0c;参加极术社区的【有奖征集】分享你的2023集创赛作品&#xff0c;秀出作品风采&#xff0c;分享2023集创赛作品扩大影响力&#xff0c;更有丰富电子礼…...

编程日记 2023/9/5 12:30:40

Java入坑之Robot类

一、概述 1.1Robot类概述 在Java中&#xff0c;Robot是一个属于java.awt包的类。它还扩展了 Object 类。该类用于为测试自动化、自运行演示以及需要控制鼠标和键盘的其他应用程序生成本机系统输入事件。换句话说&#xff0c;我们使用 Java Robot 类来触发输入事件&#xff0c;…...

编程日记 2023/9/5 12:29:39

spring-secrity的Filter顺序+自定义过滤器

Filter顺序 Spring Security的官方文档向我们提供了filter的顺序&#xff0c;实际应用中无论用到了哪些&#xff0c;整体的顺序是保持不变的: ChannelProcessingFilter&#xff0c;重定向到其他协议的过滤器。也就是说如果你访问的channel错了&#xff0c;那首先就会在channel…...

编程日记 2023/9/5 12:28:38

leetcode 371. 两整数之和

异或&#xff1a;不同为1&#xff0c;相同为0&#xff0c;刚好符合加法&#xff0c;但是缺少进位的可能 按位与&#xff1a;只有都为1才为1&#xff0c;否则都为0&#xff0c;如果两个数按位与再左移一位&#xff0c;就能代表所有要进位的位 class Solution {public int getS…...

编程日记 2023/9/5 12:27:37

Medium: Where to Define Qualified users in A/B testing?

1. Common AB Testing Setup Issue (Framework) 局限性: unqualified users will also be considered and mess up experimentation results....

编程日记 2023/9/5 12:26:36

POJ 3662 Telephone Lines 二分，最小化第k大的数

一、题目大意 我们有n个点&#xff0c;p条边&#xff0c;最小化从1到n之间的路径的第k1大的数&#xff08;当路径不超过k时就是0&#xff09; 二、解题思路 我们首先用dijkstra过一遍&#xff0c;判断从1能不能到n&#xff0c;不能直接输出-1结束。 1能到达n的话&#xff0…...

编程日记 2023/9/5 12:25:35

【mybatis-plus进阶】多租户场景中多数据源自定义来源dynamic-datasource实现

Springbootmybatis-plusdynamic-datasourceDruid 多租户场景中多数据源自定义来源dynamic-datasource实现 文章目录 Springbootmybatis-plusdynamic-datasourceDruid 多租户场景中多数据源自定义来源dynamic-datasource实现0.前言1. 作者提供了接口2. 基于此接口的抽象类实现自…...

编程日记 2023/9/5 12:24:34

vue3 async await

const getStruct async () > {//首先从store读取&#xff0c;否则通过接口获取if (store.state.struct.v ! null) {return store.state.struct.v;} else {const data await getStructApi();store.dispatch("struct/keepV", data).then(() > {console.log(&qu…...

编程日记 2023/9/5 12:23:33

CLion远程Linux开发环境搭建及找不到Linux头文件的解决方法

CLion远程开发环境搭建及找不到Linux头文件的解决方法 文章目录 CLion远程开发环境搭建及找不到Linux头文件的解决方法1.前言2.远程开发3.远程编译4.远程调试5.远程开发Linux头文件找不到&#xff08;比如pthread.h、<sys/socket.h>&#xff09;6.最后 1.前言 在某些时候…...

编程日记 2023/9/5 12:22:31

Python综合案例（基本地图使用）

一、基本地图的使用 基本代码&#xff1a; """ 演示地图可视化的基本使用 """ from pyecharts.charts import Map from pyecharts.options import VisualMapOpts# 准备地图对象 map Map() # 准备数据 data [("北京", 99),("…...

编程日记 2023/9/5 12:21:30

maven的scope总结

scope类型 compiletestprovidedruntimesystemimport compile 编译依赖范围。如果没有指定&#xff0c;就会默认使用该依赖范围。使用此依赖范围的Maven 依赖&#xff0c;对于编译、测试、运行三种classpath 都有效。大部分是这种&#xff0c;在编译、测试和运行的时候都需要使…...

编程日记 2023/9/5 12:20:29

Linux执行命令

命令格式 主命令 选项 参数&#xff08;操作对象&#xff09;例如&#xff1a; 修改主机名 hostname set-hostname 新名称显示/目录下的文件的详细信息 ls -l /命令 内置命令&#xff08;builtin&#xff09;&#xff1a;shell程序自带的命令。 外部命令&#xff1a;有独立…...

编程日记 2023/9/5 12:19:29

Nginx 配置中root和alias的区别分析

root和alias都可以定义在location模块中&#xff0c;都是用来指定请求资源的真实路径&#xff0c;比如&#xff1a; location /i/ { root /data/w3; } 请求 http://foofish.net/i/top.gif 这个地址时&#xff0c;那么在服务器里面对应的真正的资源 是 /data/w3/i/top.gif文…...

编程日记 2023/9/5 12:18:27

AP51656 PWM和线性调光 LED车灯电源驱动IC 兼容替代PT4115 PT4205

产品描述 AP51656是一款连续电感电流导通模式的降压恒流源 用于驱动一颗或多颗串联LED 输入电压范围从 5V 到 60V&#xff0c;输出电流 可达 1.5A 。根据不同的输入电压和 外部器件&#xff0c; 可以驱动高达数十瓦的 LED。 内置功率开关&#xff0c;采用高端电流采样设置 …...

编程日记 2023/9/5 12:17:26

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2025/10/10 4:18:24

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

编程新知 2025/7/23 9:09:08

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

编程新知 2025/10/12 21:17:43

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

编程新知 2025/8/12 3:03:43

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下： 重点代码分析： 启动相机前，先要通过getCameraIdList获取camera的个数以及id，然后可以通过getCameraCharacteristics获取对应id camera的capabilities（静态信息）进行一些openCamera前的…...

编程新知 2025/10/10 12:06:57

Python爬虫（一）：爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

编程新知 2025/10/6 5:08:16

PL0语法，分析器实现！

简介 PL/0 是一种简单的编程语言，通常用于教学编译原理。它的语法结构清晰，功能包括常量定义、变量声明、过程（子程序）定义以及基本的控制结构（如条件语句和循环语句）。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言，由 Niklaus Wirth 设计，用于展示编译原理的核…...

编程新知 2025/9/28 3:31:02

leetcodeSQL解题：3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

编程新知 2025/10/5 19:58:27

浅谈不同二分算法的查找情况

二分算法原理比较简单&#xff0c;但是实际的算法模板却有很多&#xff0c;这一切都源于二分查找问题中的复杂情况和二分算法的边界处理&#xff0c;以下是博主对一些二分算法查找的情况分析。 需要说明的是&#xff0c;以下二分算法都是基于有序序列为升序有序的情况&#xf…...

编程新知 2025/9/14 7:37:32

Java 二维码

Java 二维码 **技术&#xff1a;**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...

编程新知 2025/9/6 16:22:45