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

  • clashx使用教程(clash 使用)

    clashx使用教程(clash 使用)

  • ipad2021有几个颜色(ipad2020有几个颜色)

    ipad2021有几个颜色(ipad2020有几个颜色)

  • 捷停车可以查到位置吗(捷停车可以查到停车信息吗)

    捷停车可以查到位置吗(捷停车可以查到停车信息吗)

  • 漫步者tws1蓝牙耳机怎么恢复出厂设置(漫步者TWS1蓝牙耳机配对不了)

    漫步者tws1蓝牙耳机怎么恢复出厂设置(漫步者TWS1蓝牙耳机配对不了)

  • vivo x27老是自动关机怎么回事(vivox27老是自动弹出广告)

    vivo x27老是自动关机怎么回事(vivox27老是自动弹出广告)

  • 电脑版WPS表格样式怎么设置(电脑版wps表格入门基础教程)

    电脑版WPS表格样式怎么设置(电脑版wps表格入门基础教程)

  • 苹果手机中word不能输入汉字(苹果手机中我的家软件收到垃圾)

    苹果手机中word不能输入汉字(苹果手机中我的家软件收到垃圾)

  • 为什么发的抖音没有播放量(为什么发的抖音别人看不到,我能看到)

    为什么发的抖音没有播放量(为什么发的抖音别人看不到,我能看到)

  • 小米手机没有信号是怎么回事(小米手机没有信号怎么恢复正常)

    小米手机没有信号是怎么回事(小米手机没有信号怎么恢复正常)

  • 拍立得mini9和25的区别(拍立得mini9和mini8哪个好)

    拍立得mini9和25的区别(拍立得mini9和mini8哪个好)

  • 别人加我QQ好友显示精确查找

    别人加我QQ好友显示精确查找

  • 光能电子秤没电了怎么办(光能电子秤不亮了是什么情况)

    光能电子秤没电了怎么办(光能电子秤不亮了是什么情况)

  • 微信收款s1与s2的区别(微信收款机s1和s3)

    微信收款s1与s2的区别(微信收款机s1和s3)

  • 如何进行页面设置(页面设置操作步骤)

    如何进行页面设置(页面设置操作步骤)

  • 对方微信停用什么体现(对方微信号停用是什么状况)

    对方微信停用什么体现(对方微信号停用是什么状况)

  • 淘宝差评号是什么意思(什么叫差评号)

    淘宝差评号是什么意思(什么叫差评号)

  • 域名系统dns的组成不包括(dns域名组成)

    域名系统dns的组成不包括(dns域名组成)

  • 华为matebook14屏占比(华为matebook14屏幕尺寸长宽)

    华为matebook14屏占比(华为matebook14屏幕尺寸长宽)

  • 亚马逊海外自营表示什么(亚马逊海外自营多久到货)

    亚马逊海外自营表示什么(亚马逊海外自营多久到货)

  • vivo手机权限管理在哪里(vivo手机权限管理找不到)

    vivo手机权限管理在哪里(vivo手机权限管理找不到)

  • 探探能搜索好友吗(探探可以搜索人么)

    探探能搜索好友吗(探探可以搜索人么)

  • word怎么设置首行缩进(word怎么设置首页无页码)

    word怎么设置首行缩进(word怎么设置首页无页码)

  • 苹果手机怎么设置个人隐私(苹果手机怎么设置呼叫转移)

    苹果手机怎么设置个人隐私(苹果手机怎么设置呼叫转移)

  • beatsx怎么恢复出厂

    beatsx怎么恢复出厂

  • 抖音创作的原声上哪找(抖音创作的原声怎么搞)

    抖音创作的原声上哪找(抖音创作的原声怎么搞)

  • 6d2对焦点设置(6d2怎么对焦)

    6d2对焦点设置(6d2怎么对焦)

  • 陌陌探探滑滑的区别(探探陌陌是干嘛的)

    陌陌探探滑滑的区别(探探陌陌是干嘛的)

  • 嘀嗒出行如何邀请车主(嘀嗒出行如何邀请新乘客)

    嘀嗒出行如何邀请车主(嘀嗒出行如何邀请新乘客)

  • 适用综合所得税率表
  • 新成立的公司如何建账
  • 互联网公司如何盈利
  • 托管物资账务处理流程
  • 工业企业辅助生产费用的分配方法
  • 投资子公司的现金流量
  • 一年内到期的非流动负债包括哪些科目
  • 标准的现金流量表格式
  • 所得税预提多了怎么处理
  • 搬运费计入
  • 发票冲红后原发票还有用吗?
  • 没在公司交社保遣散的怎么赔偿
  • 营业账簿印花税怎么算
  • 春节公司发福利买什么东西
  • 工程施工成本发票未到会计分录及账务处理
  • 电子汇票贴现怎样操作
  • 不动产广告位出租税率是多少
  • 王者荣耀中墨子的最强出装
  • windows11怎么添加桌面图标
  • 收到政府返还土地款 奖励 土地增值税
  • 代理报关费0税率
  • 知识产权 申请
  • 支付安装设备所有费用
  • 任务栏音量图标点击无反应
  • 合同资产减值怎么填
  • 包工包料工程要交哪些税
  • win7纯净版系统之家
  • 关于javascript
  • 停车缴费怎么交
  • php的fopen
  • 什么情况下个人需缴纳房产税
  • 合法票据的有哪些
  • php ajax json
  • php打包网站并在哪里打开
  • 准备动作怎么做
  • 新成立公司实收资本没到位该怎么做账
  • node使用axios
  • react 入门教程
  • 行政事业单位支出劳务费规定
  • 新公司不开户需要交税吗
  • ps怎么怎么用
  • 财务负责人和法人可以一个人吗
  • 累计折旧会影响净残值吗
  • 售后回租融资租赁会计处理
  • 税控盘减免税款怎么结转
  • 长期待摊费用怎么算出来的
  • 小企业长期股权投资减值损失采用直接转销法
  • 走账犯罪吗
  • 银行账户收费开户流程
  • 销售成本的结转
  • 为什么预付账款是资产
  • 个体户未进行抄报税怎么处罚
  • 机械租赁带司机和不带司机的税率
  • 直接收到货款也要走应收账款吗
  • mysql 加锁处理分析
  • insert into tbl() select * from tb2中加入多个条件
  • T-SQL中使用正则表达式函数
  • windows10预装
  • 用u盘重新装系统
  • webinstall.exe - webinstall是什么进程
  • subss
  • linux中遇到的问题
  • 进程管理器命令
  • 关于windows的说法正确的是
  • ipcservice.dll是什么?
  • win10系统经常弹出广告页面怎么解决
  • win10周年版
  • awk命令详解
  • Unity3D游戏开发引擎
  • jquery延时器
  • python 效率优化
  • 学完js不会用怎么办
  • 地税编码哪里查
  • 契税个税怎么说
  • 一般纳税人开增值税专票几个点
  • 矿山耕地占用税计入什么科目
  • 税控发票证书密码是什么
  • 网上订机票怎么取票
  • 残疾人就业税收优惠政策2021
  • 税务局工会
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设