位置: 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)

  • vivox50有NFC功能吗(vivox50支持nfc功能吗)

    vivox50有NFC功能吗(vivox50支持nfc功能吗)

  • 华为nova5pro有没有耳机插孔(华为nova5pro有没有红外线功能)

    华为nova5pro有没有耳机插孔(华为nova5pro有没有红外线功能)

  • 荣耀20Pro怎么关闭灭屏显示(荣耀20Pro怎么关空调)

    荣耀20Pro怎么关闭灭屏显示(荣耀20Pro怎么关空调)

  • 小米手机怎么截图(小米手机怎么截屏)

    小米手机怎么截图(小米手机怎么截屏)

  • qq好友隐藏怎么恢复(qq隐藏好友功能说明)

    qq好友隐藏怎么恢复(qq隐藏好友功能说明)

  • 老人手机显示充电错误(老人手机显示充电出错怎么解除)

    老人手机显示充电错误(老人手机显示充电出错怎么解除)

  • 怎样投诉淘宝店(怎样投诉淘宝店铺商品劣质)

    怎样投诉淘宝店(怎样投诉淘宝店铺商品劣质)

  • 抖音两个号可以发同一个视频吗(抖音两个号可以合并么)

    抖音两个号可以发同一个视频吗(抖音两个号可以合并么)

  • 苹果关联后能看到什么(苹果手机关联了能看到对方的相册吗)

    苹果关联后能看到什么(苹果手机关联了能看到对方的相册吗)

  • ipad的pages文稿打不开(ipad page文稿使用教程)

    ipad的pages文稿打不开(ipad page文稿使用教程)

  • 行距和行间距一样么(行距行间距的区别)

    行距和行间距一样么(行距行间距的区别)

  • qq邮箱文件如何下载到桌面(qq邮箱文件如何下载到u盘)

    qq邮箱文件如何下载到桌面(qq邮箱文件如何下载到u盘)

  • 手机看视频自动暂停怎么回事(手机看视频自动关机是什么原因)

    手机看视频自动暂停怎么回事(手机看视频自动关机是什么原因)

  • 支付宝扫乘车码没反应(支付宝扫乘车码多久扣钱)

    支付宝扫乘车码没反应(支付宝扫乘车码多久扣钱)

  • 每次下载app都要输入密码怎么取消(每次下载app都要输入密码怎么设置华为)

    每次下载app都要输入密码怎么取消(每次下载app都要输入密码怎么设置华为)

  • aae是什么文件(aae是什么文件烫伤吃什么食品)

    aae是什么文件(aae是什么文件烫伤吃什么食品)

  • 手机热点怎么看谁连接(手机热点怎么看用了多少流量)

    手机热点怎么看谁连接(手机热点怎么看用了多少流量)

  • iphone11怎么装双卡(iphone11怎样安装双卡)

    iphone11怎么装双卡(iphone11怎样安装双卡)

  • 荣耀9x带nfc功能吗(荣耀9xnfc功能吗)

    荣耀9x带nfc功能吗(荣耀9xnfc功能吗)

  • 迅雷发评论解除安全模式(迅雷取消评论)

    迅雷发评论解除安全模式(迅雷取消评论)

  • 淘宝账户被冻结如何办(淘宝账户被冻结怎么解除支付宝绑定)

    淘宝账户被冻结如何办(淘宝账户被冻结怎么解除支付宝绑定)

  • 如何制作详情页海报(如何制作详情页模板)

    如何制作详情页海报(如何制作详情页模板)

  • 怎么删除下载的软件(怎么删除下载的电视剧)

    怎么删除下载的软件(怎么删除下载的电视剧)

  • 鸿蒙系统3.0什么时候更新呢 鸿蒙3.0更新时间以及内容介绍(鸿蒙系统 3.0)

    鸿蒙系统3.0什么时候更新呢 鸿蒙3.0更新时间以及内容介绍(鸿蒙系统 3.0)

  • groff命令  编写手册页面(gfortran编译命令)

    groff命令 编写手册页面(gfortran编译命令)

  • 公司替员工承担个税怎么入账
  • 出口退税政策
  • 非税收入包括哪些来源
  • 税控盘退费怎么做会计分录
  • 机械租赁税率是10个点还是9个点
  • 餐厅打包盒算不算商品
  • 补计提上一年度费用
  • 团建费用会计科目
  • 生产部门领用低值易耗品,实际成本
  • 用于职工住宿的会计科目
  • 固定资产弃置费用计入什么科目
  • 欠税后股东能否退股
  • 计提应付票据利息的会计分录
  • 社会组织接受捐赠的资金的使用原则
  • 小规模纳税人开专票税率是1%还是3%
  • 计算房产税时容积率怎么算
  • 代扣代缴增值税纳税义务发生时间
  • 开票3个点13个点是什么意思
  • 文化事业建设费税率
  • 企业注销增值税进项核销账务处理流程
  • 当月认证失控发票怎么做账处理?
  • 应收账款负数可以调到哪个科目
  • 资产减值损失需要结转吗
  • 装饰公司发票怎么
  • 业务招待费例子
  • 预付会议费会计分录
  • macbookpro安装mysql
  • php基础入门教程
  • 融资中的未确认利息
  • sgmain.exe - sgmain是什么进程 有何作用
  • PHP:iconv_set_encoding()的用法_iconv函数
  • 公司向个人支付劳务费
  • 莫纳皮拉
  • 增值税发票半年能开吗
  • 农业公司经营项目有哪些?
  • 物流辅助服务包括货物运输吗
  • js浅拷贝和深拷贝的方法
  • ts类型声明 要为某个文件里的变量声明吗
  • nodejs 下载
  • 应该如何打造自己
  • 出口退税会计分局
  • 文化事业建设费的征收范围
  • 股东的投资款能转为借款
  • 个体商户个人所得税怎么算
  • 上月未结账本月不能结账
  • 企业特殊工种不备案可以补报备吗
  • 小规模纳税人税额怎么算
  • 个人的车由公司来投保可以吗
  • 销售商品房适用的增值税税率是多少
  • 员工社保报销流程
  • 以前年度多记成本费用税前扣除,今年要怎么做分录冲销
  • 待摊费用年底能够有余额么
  • 航天金税服务费不交会怎样
  • 利润表中管理费用根据什么填
  • 公司原股东转让全部股权误把认缴金额写成转让金额
  • 利润表的编制方法和步骤实操
  • Win2008 Server Core如何操作?5个步骤学会Win2008 Server Core操作
  • win10关掉搜索
  • Windows Server 2008中审核和符合性
  • centos gogs
  • win8 start menu
  • winxp软件双击后没有反应
  • ubuntu和windows比较有什么好处
  • win7系统的话筒在哪设置
  • linux开发经验指的什么
  • Win7系统打开D盘文件后怎么没有后退箭头
  • win7微软账户
  • sendmail邮件服务器在虚拟机的哪个位置
  • excel实现多选
  • unity intercom
  • Do All in Cmd Shell一切在命令行下完成第1/6页
  • python 模块定义
  • javascript有几种类型
  • js用于
  • 安卓app压力测试
  • 投诉政府平台在哪里投诉
  • 湖南省国家税务局历任局长
  • 办理税务需要开户许可证吗
  • 税务局文化品牌
  • 当月专票作废流程
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设