位置: IT常识 - 正文

前端实现 PDF 预览的常见方案(前端生成pdf文件)

编辑:rootadmin
前端实现 PDF 预览的常见方案 前端实现 PDF 预览的常见方案

推荐整理分享前端实现 PDF 预览的常见方案(前端生成pdf文件),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:前端实现pdf预览,前端如何处理pdf文件流,前端实现pdf预览功能,前端实现pdf预览,前端如何展示pdf,前端实现pdf预览功能,前端实现pdf预览,前端实现pdf预览功能,内容如对您有帮助,希望把文章链接给更多的朋友!

由于在搭建个人博客时,想实现在线预览 pdf 格式的个人简历,经过查阅大致有三大类实现方案;本文共涉及以下 5 种实现方案,如下所示:

使用 HTML 标签

iframe 标签embed 标签object 标签

使用第三方插件

PDF.jsPDFObject

PDF 文件转化成图片进行展示

第一类方案:使用 HTML 标签的实现预览效果最为简单,但兼容性最差,仅支持部分 PC 端的浏览器,移动端浏览器兼容非常差。

第二类方案:使用第三方库的功能强大,还可对 pdf 文件进行操作,PC 端兼容性比较好,但在移动端会有 pdf 文件显示不全的 bug 出现,而且在移动端浏览器兼容性一般。

第三类方案:PDF 文件转化成图片进行展示的兼容性最好,能同时在 PC 端和移动端预览,但由于是图片格式,所以选中 pdf 文件上的文件,更加无法继续宁操作。 因为我的个人博客尚未实现适配移动端,所以选择了第二类方案。

1.使用 HTML 标签

该类方法实现简单,但兼容性很差,慎重选择。

1.1 iframe 标签

HTML 内联框架元素 iframe 表示嵌套的 browsing context。它能够将另一个 HTML 页面嵌入到当前页面中。

iframe 标签的属性含义请参照 MDNiframe 标签的兼容性请参照 Can I Use iframe 标签实现方案代码如下所示:<iframe src="./test.pdf" height="900px;" width="800px"></iframe>1.2 embed 标签

HTML embed 元素将外部内容嵌入文档中的指定位置。此内容由外部应用程序或其他交互式内容源(如浏览器插件)提供。

embed 标签的属性含义请参照 MDNembed 标签的兼容性请参照 Can I Use

embed 标签实现方案代码如下所示:

<embed src="./test.pdf" type="application/pdf" width="100%" height="100%" />1.3 object 标签

HTML object 元素(或者称作 HTML 嵌入对象元素)表示引入一个外部资源,这个资源可能是一张图片,一个嵌入的浏览上下文,亦或是一个插件所使用的资源。

object 标签的属性含义请参照 MDNobject 标签的兼容性请参照 Can I Use

object 标签实现方案代码如下所示:

<object data="./test.pdf" type="application/pdf" width="100%" height="100%"></object>2.使用第三方插件

能实现实时预览 pdf 的插件还有许多种,但使用最多的是 PDF.js 与 PDFObject,所以本文只涉及这两个插件。

2.1 PDF.js2.1.1 PDF.js 简介前端实现 PDF 预览的常见方案(前端生成pdf文件)

PDF.js 是一款开源的 pdf 文档读取解析插件,可以实现在 html 下直接浏览 pdf 文档。

pdf.js 是基于Promise 对象而实现的,不了解的读者可以先去看看MDN 上的解释。pdf.js 渲染 pdf 时底层还使用了Web Worker(这会导致我们无法直接在本地运行官网下载的 demo,得在服务器上运行,详情见注意点处),不了解的读者可以去看一下阮一峰老师关于 Web Worker 的文章。

PDF.js 主要分为 3 层: 显示层采用核心层,并公开更容易使用的 API 来呈现 pdf 和从文档中获取其他信息。

层级对应文件作用Core Layer(核心层)pdf.worker.js核心层用于解析和解释二进制 PDF 文档,这一层是所有后续层的基础。一般我不会直接操作核心层,而是去操作由核心层封装的展示层,操作核心层的高级用法可去参照官网Display Layer(展示层)pdf.js显示层是对核心层进行了一个封装,从而得到更容易使用的 API,用来展示 pdf 或从文档中获取其他信息。Viewer Layer(查看器层)viewer.html+viewer.css+viewer.js查看器构建在显示层上,是 PDF 查看器的 UI。

更多的细节请参照官网

2.1.2 使用 PDF.js 具体步骤方法一

该方法是以图片形式来展示 PDF 文档,所以不能选中文本或复制文本。

具体步骤如下:

首先 npm i pdfjs-dist 下载 pdf.js 的 Prebuilt 包设置 PDFJS.GlobalWorkerOptions.workerSrc 的地址通过 PDFJS.getDocument(pdf 文件的 url) 处理 pdf 数据,返回一个 PDFDocumentLoadingTask通过 pdfDoc.getPage(i) 单独获取第 i 页的数据创建一个 canvas 元素,并设置元素的画布属性通过 page.render 方法,将数据渲染到画布上、

具体代码如下:

// 第 2 步:设置 workerSrc 地址 (具体包的地址需要依自身项目决定)import * as PDFJS from "./build/pdf.js";import pdfjsWorker from "./build/pdf.worker.js";PDFJS.GlobalWorkerOptions.workerSrc = pdfjsWorker;const pdfUrl = "./test.pdf"; //具体路径由自身项目决定,另外这可能会涉及跨域问题可参照官网解决console.log(pdfUrl);// 第 3 步:使用 PDFJS.getDocument() 处理 pdf 文档PDFJS.getDocument(pdfUrl).promise.then((pdfDoc) => { const totalPages = pdfDoc.numPages; // pdf 的总页数 const canvasContainer = document.getElementById("#canvasContainer"); //html中需创建一个相应的div容器,用于存放canvas元素 for (let i = 1; i <= totalPages; i++) { // 第4步:使用 pdfDoc.getPage(i) 获取第 i 页的数据 pdfDoc.getPage(i).then((page) => { let scaledViewport = page.getViewport({ scale: 1.5 }); //可通过scale来调节初始的缩放比 //第5步:创建一个 canvas 元素,并设置元素的画布属性 let canvas = document.createElement("canvas"); canvas.setAttribute("id", "the-canvas" + i); canvas.height = scaledViewport.height; canvas.width = scaledViewport.width; let context = canvas.getContext("2d"); let renderContext = { canvasContext: context, viewport: scaledViewport, }; //第 6 步: 使用 page.render 将数据渲染到画布上 page.render(renderContext).promise.then(() => {}); canvasContainer.appendChildren(canvas); //将canvas元素加入到容器中 }); }});方法二

直接使用官方封装好的 viewer.html 来展示自己的 PDF 文档,该方法比较简单,不用去操作 API;而且功能比较齐全,还可复制 pdf 中的文本。

具体步骤如下: 1.去官网下载打包好的 Prebuilt 版本压缩包 2.将需要打开的 PDF 文档放到与 viewer.html 文档的同一目录下 3.新建一个 html 文件,使用 window.open 方法 或 iframe 标签 来打开 viewer.html,并使用 file 字段来传入 pdf 名字信息 该方法的更多详细信息可参照博文 具体代码如下:

<!-- 使用iframe --><!-- 该方法会受iframe标签兼容性限制 --><iframe src="./web/viewer.html?file=test.pdf" frameborder="0" style="height: 800px; width: 100%"></iframe><!-- 使用window.open--><!-- 该方法会打开新窗口 --><script type="text/javascript"> window.open("./web/viewer.html?file=test.pdf");//文件和 viewer.html 同路径时</script>2.1.3 使用 PDF.js 的注意事项

这里的内容非常重要,可以避免踩坑。我就是在这浪费了足足两天的时间,最终才找到解决办法。

注意事项一:pdf.js 需要启动服务器才能运行,无法直接打开本地的文档

原因:因为 pdf.js 渲染 pdf 文档时使用了 Web Worker 技术,该 Web Worker 无法读取本地文件。可参见阮一峰老师关于 Web Worker 的文章

报错信息:Message: Missing PDF “file:///D:/%E6%A1%8C%E9%9D%A2/pdfjs/web/test.pdf”

解决办法:可通过 live-server 这个插件在本地启动服务器然后打开相应的 html 文件。

具体步骤:

npm i live-server 安装包live-server 启动服务器 更多配置信息可参见此博客打开相应的 html 文件注意事项二:我们的电脑上不能安装 IDM(Internet Download Manager)这类软件或插件。报错信息 : Unexpected server response (204) while retrieving PDF原因:因为 IDM 会拦截可下载的资源,会导致页面无法预览。解决办法:直接卸载或关闭相应的插件、软件;也可以对软件进行相应的设置。更多信息可参照博文

另外使用 pdf.js 打开发票等文件时可能会出现字体显示不全的 bug,可参照该博客解决 pdf.js 无法完全显示 pdf 文件内容的问题。

2.2 PDFObject

相对 pdf.js 来说,PDFObject 的使用非常简单。但在手机 webview 使用兼容性不太好。 PDFObject 2.0 不向后兼容 1.0 版本,针对现代浏览器设计,支持 Chrome, Firefox, Safari (OS X and iOS), IE 9-11, and MS Edge。 更多信息可参照官网地址,和该篇博客PDF 预览之 PDFObject.js 总结 使用步骤:

创建嵌入 PDF 的容器告诉 PDFObject,插入的 PDF 文件路径,以及插入到哪个容器可以选择使用 CSS 来指定视觉样式,包括维度、边框、边距等<!-- 第1步:创建嵌入PDF的容器 --><div id="pdf"></div><!-- 第2步:告诉PDFObject,插入的PDF文件路径,以及插入到哪个容器 --><script src="library/pdfobject.js"></script><script> PDFObject.embed("uploads/pdfs/dongxuemin.pdf", "#pdf");</script><!-- 第3步:可以选择使用CSS来指定视觉样式,包括维度、边框、边距等 --><style> .pdfobject-container { height: 500px; } .pdfobject { border: 1px solid #ccc; }</style>

另外还有许多第三方库可实现 pdf 预览,如:vue-pdf、jquery.media.js等等。

3.PDF 文件转化成图片进行展示

把 PDF 转换为图片也有很多控件处理,例如 Aspose.Pdf、Spire.Pdf、 pdfiumviewer 等等,不同的第三方类库使用的方法有所差异,不过思路都很类似。 由于转成图片将无法复制或选中 PDF 文档的文本,所以我没使用该方法,就没进行进一步研究。大家可去参照其他博客。

参考博课:前端预览 PDF 文件(使用 PDFJS)实现在线预览 PDF 的几种解决方案PDFObject.js、jquerymedia.js、pdf.js 的对比PDF 预览之 PDFObject.js 总结

码字不易,觉得有帮助的朋友点赞,关注走一波。

如果对本文存在疑惑,可在评论区讨论,欢迎大家指正文中的错误观点。

本文链接地址:https://www.jiuchutong.com/zhishi/284046.html 转载请保留说明!

上一篇:A meerkat in Namibia (© Danita Delimont/Offset by Shutterstock)

下一篇:neovis.js+vue实现知识图谱前端展示,踩坑后的经验分享!!!(vue onshow)

  • 抖音艾特抖音小助手有什么用呢(抖音艾特抖音小助手会火吗)

    抖音艾特抖音小助手有什么用呢(抖音艾特抖音小助手会火吗)

  • 剪映怎么给视频加箭头(剪映怎么给视频换背景)

    剪映怎么给视频加箭头(剪映怎么给视频换背景)

  • iphone7plus怎么设置来电闪光灯(iphone7plus怎么设置应用锁)

    iphone7plus怎么设置来电闪光灯(iphone7plus怎么设置应用锁)

  • se2支持18w快充吗(se2是否支持18w快充)

    se2支持18w快充吗(se2是否支持18w快充)

  • 配送模式有哪些(配送模式)

    配送模式有哪些(配送模式)

  • 腾讯会议王卡免流吗(腾讯会议王卡免流怎么设置)

    腾讯会议王卡免流吗(腾讯会议王卡免流怎么设置)

  • 苹果自带的ppt软件(苹果自带的ppt软件图标)

    苹果自带的ppt软件(苹果自带的ppt软件图标)

  • 设置黑名单后别人打电话会怎样(设置黑名单后别人发信会怎样)

    设置黑名单后别人打电话会怎样(设置黑名单后别人发信会怎样)

  • 酷睿10代什么时候上市(10代酷睿什么时候降价)

    酷睿10代什么时候上市(10代酷睿什么时候降价)

  • 微信出现风险提示怎么快速解决(微信出现风险提示)

    微信出现风险提示怎么快速解决(微信出现风险提示)

  • 华为高端机用久了会卡吗(华为高端手机能用几年不卡)

    华为高端机用久了会卡吗(华为高端手机能用几年不卡)

  • 自家wifi密码突然不正确怎么办(自己家的wifi密码突然变错误了)

    自家wifi密码突然不正确怎么办(自己家的wifi密码突然变错误了)

  • 腾讯视频怎么调成3d(腾讯视频怎么调清晰度)

    腾讯视频怎么调成3d(腾讯视频怎么调清晰度)

  • 微信情侣空间解除对方知道吗(微信情侣空间解除了对方会收到提示吗)

    微信情侣空间解除对方知道吗(微信情侣空间解除了对方会收到提示吗)

  • 怎么从手机上下载歌曲到u盘上(怎么从手机上下载歌曲到内存卡)

    怎么从手机上下载歌曲到u盘上(怎么从手机上下载歌曲到内存卡)

  • 京东可以撤回消息吗(京东撤回消息系统几天会检测到吗安全吗)

    京东可以撤回消息吗(京东撤回消息系统几天会检测到吗安全吗)

  • iphone11夜景模式怎么开启(iphone11夜景模式不能开闪光灯)

    iphone11夜景模式怎么开启(iphone11夜景模式不能开闪光灯)

  • vivo手机hd在哪打开(vivo手机上面hd怎么开)

    vivo手机hd在哪打开(vivo手机上面hd怎么开)

  • 画图窗口有哪几部分组成(画图窗口介绍)

    画图窗口有哪几部分组成(画图窗口介绍)

  • 拼多多ip地址在哪儿(拼多多ip地址查询)

    拼多多ip地址在哪儿(拼多多ip地址查询)

  • 微信表情怎么添加文字(微信表情怎么添加文字上去)

    微信表情怎么添加文字(微信表情怎么添加文字上去)

  • 无法激活4g通话怎么办(无法接通激活服务)

    无法激活4g通话怎么办(无法接通激活服务)

  • 局域网游戏需要IPX协议该怎么办(局域网游戏电脑)

    局域网游戏需要IPX协议该怎么办(局域网游戏电脑)

  • 服务费收入是什么
  • 分公司的企业所得税税率是多少
  • 什么是特别纳税人
  • 土地取得方式有哪些
  • 资源税类包括哪些税种
  • 劳务公司包工包料的法律法规
  • 零星小额交易要交税吗
  • 公司净资产减少
  • 原材料当废品卖怎么处理
  • 4s店试驾车转卖怎么开票
  • 未完工的工程款怎么支付
  • 会议服务费怎么报价
  • 水费适用税率
  • 酒店工作车工作间标准
  • 土地+n
  • 资产负债表应交税费计算公式
  • 视同销售如何纳税调整?
  • 公司收到个人投资款没有备注
  • 商超联营扣点
  • 杜邦分析法的三个核心是什么
  • 1697509557
  • 企业资产转移是什么意思
  • 资产无偿调拨账务处理
  • 公转私合理吗
  • 2021windows10专业版
  • 计提法定盈余公积分录并结转
  • 获取 获得
  • 原材料盘亏计入
  • 冲回坏账
  • 域名停靠是病毒吗
  • PHP:mb_encode_mimeheader()的用法_mbstring函数
  • 销售商品并收到货款的会计分录
  • 高新企业有啥用
  • 固定资产更新改造的账务处理
  • 生产企业免抵退税实例
  • 员工餐费需要附什么凭证
  • 工程材料费发票没拿到是否能预提费用
  • elementui的upload组件详解
  • python字符串如何提取单词
  • 不良品扣款应入哪个科目
  • 销售商品的收入属于收入吗
  • 记账凭证的主要作用有
  • 电梯安装行业分类
  • 增值税附加税有哪几种
  • 交给工会的40%的工会经费里还要再返60%吗
  • 高效刷题app
  • 出租车发票可以改时间吗
  • 追索权行使的形式要件是什么
  • 外贸企业退税怎么申报
  • 物流公司驾驶员安全教育培训
  • 商业会计和财务会计
  • 记账凭证分类
  • 合适的库存产品包括
  • 暂估入账是什么意思
  • 园林绿化公司的税率是多少
  • mysql允许字段为空
  • 取消默认
  • 快速释放剪贴蒙版快捷键
  • linux系统中的输入输出分为三类
  • lol进入游戏后电脑没声音
  • Win10 Mobile RS2预览版14951升级遭遇卡在0%的解决办法
  • mac阻止itunes自动弹出
  • mac怎么共享网络给iphone
  • mblme是什么进程
  • opengl帧缓冲
  • javascript简明教程
  • nodejs writefile
  • linux+php
  • 实用的批处理
  • shell脚本识别十六进制数
  • 详解金球奖之争
  • unity怎么弄游戏小地图
  • unity3d spine
  • javascript快速入门
  • script标签可以放在html哪个位置
  • js 自执行
  • 江西电子税务局官网app
  • 税务局高风险是怎么办
  • 贵阳国家高新技术产业开发区管理委员会
  • 深圳国家税务总局
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设