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

前端pdf预览方案

news 2025/12/15 14:06:00

前端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

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/12/14 0:09:42

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术，以解决单机资源不足的问题。分布式训练主要分为两种模式： 数据并行：将数据分片到不同设备，每个设备拥有完整的模型副本 模型并行：将模型分割到不同设备，每个设备处理部分模型计算 现代大模型训练通常结合…...

编程新知 2025/12/10 20:45:02

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

编程新知 2025/12/5 1:47:15

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

编程新知 2025/10/31 23:08:41

中医有效性探讨

文章目录 西医是如何发展到以生物化学为药理基础的现代医学&#xff1f;传统医学奠基期&#xff08;远古 - 17 世纪&#xff09;近代医学转型期&#xff08;17 世纪 - 19 世纪末&#xff09;​现代医学成熟期&#xff08;20世纪至今&#xff09; 中医的源远流长和一脉相承远古至…...

编程新知 2025/12/12 13:14:21

Java编程之桥接模式

定义 桥接模式&#xff08;Bridge Pattern&#xff09;属于结构型设计模式&#xff0c;它的核心意图是将抽象部分与实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过组合关系来替代继承关系&#xff0c;从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...

编程新知 2025/11/3 2:51:56

CSS | transition 和 transform的用处和区别

省流总结&#xff1a; transform用于变换/变形&#xff0c;transition是动画控制器 transform 用来对元素进行变形&#xff0c;常见的操作如下&#xff0c;它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...

编程新知 2025/10/17 20:59:57

FFmpeg：Windows系统小白安装及其使用

一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】&#xff0c;注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录&#xff08;即exe所在文件夹&#xff09;加入系统变量…...

编程新知 2025/12/14 0:22:03

Ubuntu系统复制（U盘-电脑硬盘）

所需环境 电脑自带硬盘&#xff1a;1块 (1T) U盘1&#xff1a;Ubuntu系统引导盘&#xff08;用于“U盘2”复制到“电脑自带硬盘”&#xff09; U盘2&#xff1a;Ubuntu系统盘&#xff08;1T&#xff0c;用于被复制&#xff09; &#xff01;&#xff01;&#xff01;建议“电脑…...

编程新知 2025/12/10 20:24:30

智能职业发展系统：AI驱动的职业规划平台技术解析

智能职业发展系统&#xff1a;AI驱动的职业规划平台技术解析 引言&#xff1a;数字时代的职业革命 在当今瞬息万变的就业市场中&#xff0c;传统的职业规划方法已无法满足个人和企业的需求。据统计&#xff0c;全球每年有超过2亿人面临职业转型困境&#xff0c;而企业也因此遭…...

编程新知 2025/9/26 10:15:18