前端pdf预览方案

ops/2024/11/19 16:02:48/

pdf_0">前端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 等低版本浏览器。样式无法自定义。

pdfjshttpswwwnpmjscompackagepdfjsdist_27">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预览的,但可能需要注意一些版本兼容性和实现方式的问题。

pdfjsiosSafari_38">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_50">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>
pdfH5httpswwwnpmjscompackagepdfh5_168">另一个插件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 来触发下载。(需要同域)

http://www.ppmy.cn/ops/135013.html

相关文章

基于Canny边缘检测和轮廓检测

这段代码实现了基于Canny边缘检测和轮廓检测&#xff0c;从图像中筛选出面积较大的矩形&#xff0c;并使用OpenCV和Matplotlib显示结果。主要流程如下&#xff1a; 步骤详解&#xff1a; 读取图像&#xff1a; img cv2.imread(U:/1.png)使用cv2.imread()加载图像。 转换为灰…

NLP论文速读(微软出品)|使用GPT-4进行指令微调(Instruction Tuning with GPT-4)

论文速读|Instruction Tuning with GPT-4 论文信息&#xff1a; 简介&#xff1a; 这篇论文试图解决的问题是如何通过指令调优&#xff08;instruction-tuning&#xff09;提升大型语言模型&#xff08;LLMs&#xff09;在执行新任务时的零样本&#xff08;zero-shot&#xff0…

python+Django+MySQL+echarts+bootstrap制作的教学质量评价系统,包括学生、老师、管理员三种角色

项目介绍 该教学质量评价系统基于Python、Django、MySQL、ECharts和Bootstrap技术&#xff0c;旨在为学校或教育机构提供一个全面的教学质量评估平台。系统主要包括三种角色&#xff1a;学生、老师和管理员&#xff0c;每个角色有不同的功能权限。 学生角色&#xff1a;学生可…

【taro react】 ---- 解决 input 、textarea 层级穿透

1. 问题效果图 2. 穿透原因 2.1 原生组件 2.2 层级限制 2.3 原生组件同层渲染 3. 解决办法 使用 alwaysEmbed 属性,强制 input 处于同层状态,默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效)。

数据库审计工具--Yearning 3.1.9普民的使用指南

1 页面登录 登录地址:18000 &#xff08;不要勾选LDAP&#xff09; 2 修改用户密码 3 DML/DDL工单申请及审批 工单申请 根据需要选择【DML/DDL/查询】中的一种进行工单申请 填写工单信息提交SQL检测报错修改sql语句重新进行SQL检测&#xff0c;如检测失败可以进行SQL美化后…

如何提升自己的情商?

在当今社会&#xff0c;情商的重要性越来越被人们所认识和重视。无论是职场发展、人际关系&#xff0c;还是自我成长&#xff0c;情商都起着关键的作用。那么&#xff0c;如何提升自己的情商呢&#xff1f; 一、自我认知&#xff1a;了解自己&#xff0c;方能明智处世 自我认…

c++模板——我的周年庆

1.搜索 搜索包括深度优先搜索和广度优先搜索,这两种算法是算法竞赛的基础。本专题全面介绍这两种算法的思想、编码、应用和扩展。它不仅能直接用于解决问题,也启发了很多高级算法 搜索简介 搜索是 "暴力法" 算法思想的具体实现。暴力法(Brute Force)又称为蛮力法…

社交电商的优势及其与 AI 智能名片小程序、S2B2C 商城系统的融合发展

摘要&#xff1a;本文深入分析了社交电商相较于传统电商的优势&#xff0c;包括门槛低、易操作、更生活化和可团队化运作等特点。同时&#xff0c;探讨了 AI 智能名片小程序和 S2B2C 商城系统在社交电商发展中的作用&#xff0c;以及它们与社交电商融合所带来的新机遇和发展前景…