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

前端pdf预览方案

news 2025/10/30 6:44:56

前端pdf预览方案

pdf预览一般不需要前端生成pdf文件，pdf文件一般是通过接口，获取pdf文件【responseType:‘blob’,】或二进制文件流【responseType: ‘arraybuffer’,】或者已有的pdf文件。

前端PDF预览通常是通过读取现有的PDF文件，并使用Canvas或SVG等元素在网页上展示PDF内容

前端预览PDF的最好方式还是让服务器端处理，不光对于前端，也包括后端，这应该是最方便的也是最不易出现问题的方法。

通过接口直接获取Canvas文件流，或svg代码或者文件流。避免了前端做pdf读取操作【前端pdf预览插件大多都很老了，各有隐患，而且pdf读取肯定会慢】；同时也避免了可能出现的不同设备出现的兼容性问题【pc，安卓，ios】。

如果一定要前端处理pdf预览，下面方案仅供参考：

![外链图

使用 iframe、embed、新窗口打开【看天吃饭，基本不建议】
<embed src="https://demo/path.pdf">

<iframe src="https://demo/path.pdf"></iframe>

优点：简单，支持大部分 PC 浏览器（IE 不支持）。跨域资源同样可以（无需 cors）
缺点：不支持移动端浏览器，不支持 IE 等低版本浏览器。样式无法自定义。

pdfjs插件【https://www.npmjs.com/package/pdfjs-dist】

pdfjs插件是最流行的、PDF预览、JavaScript库

PDF.js作为Mozilla开发的一个JavaScript库，旨在提供一个纯JavaScript实现的PDF文件解析和渲染解决方案，使用户能在浏览器环境中无缝地查看PDF文档，而无需依赖任何插件。

PDF.js使用现代Web技术，包括WebGL（用于高级图形渲染）和HTML5
Canvas（用于基本绘图操作），来解析PDF文件的内容，并将其转换为可在浏览器中展示的元素。它提供了丰富的API和配置选项，允许开发者根据需求调整界面样式和功能。此外，PDF.js还支持缩放、旋转、拖动等PDF操作，以及导出为图片和提取文字等功能。

缺点：PDF.js是支持iOS预览的,但可能需要注意一些版本兼容性和实现方式的问题。

pdf.js在ios系统里和Safari浏览器可能出现的兼容性问题
  1. Safari版本问题 ：某些旧版本的Safari浏览器可能不支持pdf.js所需的一些JavaScript特性或API，导致无法正常使用。例如，早期版本的Safari不支持私有类字段（这是ES2022引入的特性），而某些版本的pdf.js可能使用了这一特性。
  2. 代码实现问题 ：如果pdf.js的代码实现与Safari浏览器的某些特性存在冲突，也可能导致无法正常使用。例如，pdf.js在Safari中可能无法正确解析或渲染PDF文件，或者出现空白页面等问题。
二、解决方案
  1. 升级Safari浏览器 ：确保你的Safari浏览器是最新版本，以便支持pdf.js所需的JavaScript特性和API。
  2. 使用兼容版本的pdf.js ：如果你正在使用的pdf.js版本与Safari存在兼容性问题，可以尝试使用旧版本的pdf.js，这些版本可能更兼容Safari浏览器。例如，有用户报告说将pdf-dist库降级为v2.4.456可以解决在Safari中的兼容性问题。
  3. 调整代码实现 ：如果你有能力修改pdf.js的代码，可以尝试调整代码实现以兼容Safari浏览器。例如，避免使用Safari不支持的JavaScript特性或API，或者添加针对Safari的特定处理逻辑。
  4. 使用第三方库或工具 ：如果以上方法都无法解决问题，你可以考虑使用其他第三方库或工具来在Safari中预览PDF文件。这些库或工具可能已经针对Safari浏览器进行了优化和测试，具有更好的兼容性和稳定性。
pdfjs的使用方式
// pdf有两种使用方式：
第一种是pdfjs-view（pdfjs-view-es5）分为两个版本/web/viewer-1.html 和 /legacy/web/viewer.html 。legacy 支持低版本浏览器，使用 es5 编写
const res = await downloadPdf({date: reportDate.value,})const resUrl = URL.createObjectURL(res);window.open(`./pdf/web/viewer.html?file=${resUrl}`);第二种是通过js实现：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>testDemo</title><script src="./pdf/build/pdf.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.7.7/axios.min.js"></script><style>.pdf {display: flex;align-items: center;justify-content: center;height: 100vh;background-color: #f4f4f9;margin: 0;padding: 0;}#preViewPdf {width: 100%;height: 100vh;background: white;box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);border-radius: 8px;overflow-y: auto;position: relative;}#loading {position: absolute;color: #555;font-size: 1.2em;top: 50%;left: 50%;transform: translate(-50%, -50%);}.pdf-page {display: flex;justify-content: center;margin-bottom: 10px;}canvas {max-width: 100%;height: auto;}</style>
</head><body><div class="pdf"><div id="preViewPdf"><div id="loading">Loading1114...</div></div></div>
</body>
<script>window.onload = async function () {const el = document.getElementById('preViewPdf');const loadingText = document.getElementById("loading");const res = await axios({url: '/demo.pdf',method: "get",// responseType: 'arraybuffer',responseType: 'blob',})const resUrl = URL.createObjectURL(res.data);// 加载 pdf 资源let loadingTask = pdfjsLib.getDocument(resUrl)// PDF 加载完成的回调。loadingTask.promise.then(function (pdf) {pdf.getPage(1).then(function (page) {var viewport = page.getViewport({scale: 1,});// var scale = (500 / viewport.width).toFixed(2)// console.log('日志：', scale);// viewport = page.getViewport({//   scale: scale// });var canvas = document.createElement('canvas');el.appendChild(canvas)var context = canvas.getContext('2d');canvas.height = viewport.height;canvas.width = viewport.width;// 创建了一个canvas画板用来存放var renderContext = {canvasContext: context,viewport: viewport};loadingText.style.display = 'none'page.render(renderContext);});}, function (reason) {console.error(reason)})}
</script></html>
另一个插件pdfH5【https://www.npmjs.com/package/pdfh5】

注意：

  1. 这是一个很老的插件，可能这个差价的部分依赖插件已经停止维护了；

  2. 如果有报错，请复制example运行，然后对照相关文件，以及package.json，缺什么补什么

  3. 如果有某些字体显示不了，那可能是pdf.js缺少相关字库解析，可以尝试更改cMapUrl，建议去官方地址找版本

  4. 如果IOS下pdf显示不了，安卓却可以，可能是pdf精度过高导致，Safari浏览器canvas渲染绘制图片宽高不能超过16777216，超过会不显示

    如果可以用，这个插件使用还是很方便的，但是如果有问题，还是换回pdf.js吧

示例：
<template><div id="app"><div id="demo"></div></div>
</template>
<script>import Pdfh5 from "pdfh5";export default {name: 'App',data() {return {pdfh5: null};},mounted() {//实例化this.pdfh5 = new Pdfh5("#demo", {pdfurl: "../../static/test.pdf",// cMapUrl:"https://unpkg.com/pdfjs-dist@3.8.162/cmaps/",// responseType: "blob" // blob arraybuffer});//监听完成事件this.pdfh5.on("complete", function (status, msg, time) {console.log("状态：" + status + "，信息：" + msg + "，耗时：" + time + "毫秒，总页数：" + this.totalNum)//禁止手势缩放this.pdfh5.zoomEnable(false);})}}
</script><style>@import "pdfh5/css/pdfh5.css";*{padding: 0;margin: 0;}html,body,#app {width: 100%;height: 100%;}
</style>
下载 PDF【一个简单的办法，特殊情况可用】
  1. 下载头
  2. 直接打开
    1. 如果浏览器不支持解析 PDF 那么可以触发下载。
    2. 如果浏览器支持解析 PDF，那么会变成预览。
    3. 这个时候我们可以给 a 标签加上 download 来触发下载。（需要同域）

相关文章：

前端pdf预览方案

前端pdf预览方案 pdf预览一般不需要前端生成pdf文件&#xff0c;pdf文件一般是通过接口&#xff0c;获取pdf文件【responseType:‘blob’,】或二进制文件流【responseType: ‘arraybuffer’,】或者已有的pdf文件。 前端PDF预览通常是通过读取现有的PDF文件&#xff0c;并使用…...

编程日记 2024/11/19 20:11:08

java 深拷贝 浅拷贝 详解

在 Java 中&#xff0c;深拷贝和浅拷贝是对象拷贝&#xff08;复制&#xff09;时的两个重要概念&#xff0c;它们决定了拷贝后的对象与原对象之间的关联性。以下是深拷贝和浅拷贝的详解&#xff0c;包括定义、实现方式及其区别。 1. 概念解释 1.1 浅拷贝&#xff08;Shallow …...

编程日记 2024/11/19 20:10:06

针对git、giteeVSCode连接的使用 || Live Share插件使用

1.下载git 链接 打开终端&#xff0c;桌面鼠标右键 2.配置密钥 登录gitee。 设置密钥 查看官方文档 跟着教程 复制最后的输出进行密钥添加 验证是否添加成功 3.创建&连接远程仓库 创建仓库 git终端进行配置 远程仓库克隆到本地 桌面终端clone,克隆他人|自己的仓库到本地…...

编程日记 2024/11/19 20:07:03

如何解决Ubuntu 20.04中Vim编辑器在按下Ctrl+S时暂停响应的问题

如何解决Ubuntu 20.04中Vim编辑器在按下CtrlS时暂停响应的问题 在Ubuntu 20.04中使用Vim编辑器时&#xff0c;用户可能会遇到按下CtrlS后编辑器似乎“卡死”或无响应的情况。这个问题实际上源于历史悠久的终端行为&#xff0c;而非Vim本身或操作系统的缺陷。以下是详细的分析及…...

编程日记 2024/11/19 20:00:55

mybatisPlus打印sql配置

MyBatis-Plus 提供了方便的配置方式来打印 SQL 查询语句&#xff0c;以便进行调试和性能分析。可以通过配置 log 来输出 SQL 语句以及执行的参数。 方法 1&#xff1a;通过 application.properties 或 application.yml 配置打印 SQL 可以通过配置 application.properties 或 a…...

编程日记 2024/11/19 19:57:50

Redis 内存管理

参考&#xff1a;面试官&#xff1a;为什么 Redis 不立刻删除已经过期的数据&#xff1f; 目录 1.Redis 给缓存数据设置过期时间有什么用&#xff1f; 2.Redis 是如何判断数据是否过期的呢&#xff1f; 3.Redis 过期 key 删除策略了解么&#xff1f; 4.大量 key 集中过期怎…...

编程日记 2024/11/19 19:53:47

Excel表文本函数、日期和时间函数

一、文本函数 函数说明CHAR返回字符代码所对应的字符CLEAN删除文本中的所有不可打印字符CODE返回文本字符串首字符的代码CONCATENATE合并多个文本字符串EXACT检查两个文本是否完全相同FIND查找文本中某个字符串的位置LEFT从文本的左边开始返回指定数量的字符LEN返回文本字符串…...

编程日记 2024/11/19 19:48:43

从零到一：利用 AI 开发 iOS App 《震感》的编程之旅

在网上看到一篇关于使用AI开发的编程经历&#xff0c;分享给大家 作者是如何在没有 iOS 开发经验的情况下&#xff0c;借助 AI&#xff08;如 Claude 3 模型&#xff09;成功开发并发布《震感》iOS 应用。 正文开始 2022 年 11 月&#xff0c;ChatGPT 诞生并迅速引发全球关注。…...

编程日记 2024/11/19 19:44:37

基于Java Springboot幼儿园管理系统

一、作品包含 源码数据库设计文档万字PPT全套环境和工具资源部署教程 二、项目技术 前端技术&#xff1a;Html、Css、Js、Vue、Element-ui 数据库&#xff1a;MySQL 后端技术&#xff1a;Java、Spring Boot、MyBatis 三、运行环境 开发工具&#xff1a;IDEA/eclipse 数据…...

编程日记 2024/11/19 19:41:34

Python小白学习教程从入门到入坑------习题课2（基础巩固）

目录 一、选择题 二、实战题 2.1 实战1&#xff1a;输入一个年份&#xff0c;判断是否是闰年 2.2 实战2&#xff1a;模拟10086查询功能 2.3 实战3&#xff1a;使用嵌套循环输出九九乘法表 2.4 实战4&#xff1a;猜数游戏 一、选择题 1、以下选项符合Python语法要求且能够…...

编程日记 2024/11/19 19:40:33

基于IPMI_SSH的服务器硬件监控指标解读

随着企业IT架构的日益复杂化&#xff0c;对服务器的实时监控和管理变得至关重要。监控易作为一款功能强大的监控软件&#xff0c;支持通过IPMI_SSH的方式对服务器硬件进行远程监控&#xff0c;确保服务器的稳定运行。本文将针对监控易中基于IPMI_SSH的服务器硬件监控指标进行解…...

编程日记 2024/11/19 19:39:33

数据结构-二叉树及其遍历

🚀欢迎来到我的【数据结构】专栏🚀 🙋我是小蜗，一名在职牛马。🐒我的博客主页​​​​​​ ➡️ ➡️ 小蜗向前冲的主页🙏🙏欢迎大家的关注，你们的关注是我创作的最大动力🙏🙏🌍前言 本篇文章咱们聊聊数据结构中的树，准确的说因该是只说一说二叉树以及相…...

编程日记 2024/11/19 19:38:31

（33）iptables设置防火墙策略常用命令（docker环境、非docker环境）

#普通环境&#xff08;非docker&#xff09; # 拒绝所有对端口 31001 的访问 iptables -A INPUT -p tcp --dport 31001 -j DROP # 允许 IP 地址 20.59.30.77 访问端口 31001 (此处用的是虚拟机 所以要使用nat地址的网关) iptables -I INPUT 1 -p tcp -s 20.59.30.77 --dpor…...

编程日记 2024/11/19 19:35:28

fastadmin中动态下拉组件(SelectPage)的使用

实现的功能如下&#xff1a; 1、支持模糊搜索&#xff1b;2、分页功能&#xff1b;3支持多选 官方文档&#xff1a;https://doc.fastadmin.net/doc/178.html html页面引用组件 <div class"form-group"><label class"control-label col-xs-12 col-sm-2…...

编程日记 2024/11/19 19:29:22

通过Python 调整Excel行高、列宽

在Excel中&#xff0c;默认的行高和列宽可能不足以完全显示某些单元格中的内容&#xff0c;特别是当内容较长时。通过调整行高和列宽&#xff0c;可以确保所有数据都能完整显示&#xff0c;避免内容被截断。合理的行高和列宽可以使表格看起来更加整洁和专业&#xff0c;尤其是在…...

编程日记 2024/11/19 19:21:15

力扣-Mysql-3278. 寻找数据科学家职位的候选人 II（中等）

一、题目来源 3278. 寻找数据科学家职位的候选人 II - 力扣&#xff08;LeetCode&#xff09; 二、数据表结构 表&#xff1a;Candidates ----------------------- | Column Name | Type | ----------------------- | candidate_id | int | | skill | varch…...

编程日记 2024/11/19 19:18:12

Android笔记(三十六)：封装一个Matrix从顶部/底部对齐的ImageView

背景 ImageView的scaleType默认显示图片是这样&#xff0c;但是有时候设计稿需求希望图片左右能紧贴着ImageView左右边缘&#xff0c;又不破坏图片的比例&#xff0c;用自带的matrix&#xff0c;centerCrop等都可以满足 但是都会造成图片的某些区域被裁剪了&#xff0c;如果设…...

编程日记 2024/11/19 19:16:09

web 入门

学习 Web 开发的基础&#xff0c;建议从以下几个方面入门&#xff0c;按步骤循序渐进学习核心知识&#xff1a; 1. 了解 Web 的基础概念 在开始编码之前&#xff0c;先理解 Web 开发的基本工作原理&#xff1a; Web 前端与后端&#xff1a; 前端&#xff1a;负责用户界面和用…...

编程日记 2024/11/19 19:15:08

京东 2025届秋招 自然语言处理

文章目录 个人情况一面/HR面 10min二面/技术面 1h三面/技术面 1h四面/线下HR面 20min 个人情况 先说一下个人情况&#xff1a; 学校情况&#xff1a;211本中9硕&#xff0c;本硕学校都一般&#xff0c;本硕都是计算机科班&#xff0c;但研究方向并不是NLP&#xff0c;而是图表…...

编程日记 2024/11/19 19:14:07

Mybatis框架之模板方法模式 (Template Method Pattern)

MyBatis 中也使用到了 模板方法模式 (Template Method Pattern)&#xff0c;主要体现在 执行 SQL 语句的流程控制 上。模板方法模式允许 MyBatis 定义数据库操作的标准流程&#xff0c;并允许子类或特定实现类去实现某些步骤。这种模式使得 MyBatis 能够在处理不同类型的 SQL 操…...

编程日记 2024/11/19 19:13:06

[10-3]软件I2C读写MPU6050 江协科技学习笔记（16个知识点）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

编程新知 2025/10/27 13:41:27

JVM暂停（Stop-The-World，STW）的原因分类及对应排查方案

JVM暂停（Stop-The-World，STW）的完整原因分类及对应排查方案，结合JVM运行机制和常见故障场景整理而成： 一、GC相关暂停​​ 1. ​​安全点（Safepoint）阻塞​​ ​​现象​​：JVM暂停但无GC日志，日志显示No GCs detected。​​原因​​：JVM等待所有线程进入安全点（如…...

编程新知 2025/10/2 12:07:03

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

编程新知 2025/10/26 14:58:46

RSS 2025｜从说明书学习复杂机器人操作任务：NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

视觉语言模型&#xff08;Vision-Language Models, VLMs&#xff09;&#xff0c;为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展&#xff0c;机器人仍难以胜任复杂的长时程任务&#xff08;如家具装配&#xff09;&#xff0c;主要受限于人…...

编程新知 2025/10/29 13:23:10

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

编程新知 2025/8/17 23:35:19

在树莓派上添加音频输入设备的几种方法

在树莓派上添加音频输入设备可以通过以下步骤完成&#xff0c;具体方法取决于设备类型&#xff08;如USB麦克风、3.5mm接口麦克风或HDMI音频输入&#xff09;。以下是详细指南&#xff1a; 1. 连接音频输入设备 USB麦克风/声卡&#xff1a;直接插入树莓派的USB接口。3.5mm麦克…...

编程新知 2025/10/24 14:12:54

上位机开发过程中的设计模式体会(1)：工厂方法模式、单例模式和生成器模式

简介 在我的 QT/C 开发工作中&#xff0c;合理运用设计模式极大地提高了代码的可维护性和可扩展性。本文将分享我在实际项目中应用的三种创造型模式&#xff1a;工厂方法模式、单例模式和生成器模式。 1. 工厂模式 (Factory Pattern) 应用场景 在我的 QT 项目中曾经有一个需…...

编程新知 2025/8/18 3:01:22

书籍“之“字形打印矩阵(8)0609

题目 给定一个矩阵matrix&#xff0c;按照"之"字形的方式打印这个矩阵&#xff0c;例如&#xff1a; 1 2 3 4 5 6 7 8 9 10 11 12 ”之“字形打印的结果为&#xff1a;1&#xff0c;…...

编程新知 2025/10/14 13:57:04

图解JavaScript原型：原型链及其分析 | JavaScript图解

​​ 忽略该图的细节&#xff08;如内存地址值没有用二进制&#xff09; 以下是对该图进一步的理解和总结 1. JS 对象概念的辨析 对象是什么&#xff1a;保存在堆中一块区域&#xff0c;同时在栈中有一块区域保存其在堆中的地址&#xff08;也就是我们通常说的该变量指向谁&…...

编程新知 2025/10/26 21:08:03

用递归算法解锁「子集」问题 —— LeetCode 78题解析

文章目录 一、题目介绍二、递归思路详解&#xff1a;从决策树开始理解三、解法一&#xff1a;二叉决策树 DFS四、解法二&#xff1a;组合式回溯写法&#xff08;推荐&#xff09;五、解法对比 递归算法是编程中一种非常强大且常见的思想&#xff0c;它能够优雅地解决很多复杂的…...

编程新知 2025/10/4 7:43:43