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

  • 荣耀x30i手机有语音呼唤吗(荣耀x30i手机有多长)

    荣耀x30i手机有语音呼唤吗(荣耀x30i手机有多长)

  • 小米手机圆圈浮动窗口怎么关闭(小米手机小圆圈)

    小米手机圆圈浮动窗口怎么关闭(小米手机小圆圈)

  • 华为40w充电头真假鉴别(华为40w充电头真假对比)

    华为40w充电头真假鉴别(华为40w充电头真假对比)

  • 小米手机怎么自定义应用图标(小米手机怎么自检)

    小米手机怎么自定义应用图标(小米手机怎么自检)

  • 苹果x黑屏转圈怎么办(苹果x黑屏转圈圈打不开怎么办)

    苹果x黑屏转圈怎么办(苹果x黑屏转圈圈打不开怎么办)

  • 企业微信为什么进不去(企业微信为什么会封号)

    企业微信为什么进不去(企业微信为什么会封号)

  • wlan有个感叹号是什么意思(wlan有个感叹号怎么回事)

    wlan有个感叹号是什么意思(wlan有个感叹号怎么回事)

  • 机械硬盘当移动硬盘用的坏处(机械硬盘当移动硬盘用时,电脑找不到盘)

    机械硬盘当移动硬盘用的坏处(机械硬盘当移动硬盘用时,电脑找不到盘)

  • 钉钉好友能看到对方位置吗(钉钉好友能看到我的公司名称吗)

    钉钉好友能看到对方位置吗(钉钉好友能看到我的公司名称吗)

  • dir s指令有什么用(dir/s是什么指令)

    dir s指令有什么用(dir/s是什么指令)

  • ipad卡住了没反应怎么办(ipad卡住不动了)

    ipad卡住了没反应怎么办(ipad卡住不动了)

  • ipad wifi版是什么意思(apple平板wifi版是什么意思)

    ipad wifi版是什么意思(apple平板wifi版是什么意思)

  • 腾讯开放平台推出时间(腾讯开放平台官网手机版)

    腾讯开放平台推出时间(腾讯开放平台官网手机版)

  • 京东评价过滤掉的原因(京东评价评错了,删不掉,还有什么办法补救)

    京东评价过滤掉的原因(京东评价评错了,删不掉,还有什么办法补救)

  • vivox9支不支持nfc(vivox9支不支持无线充电)

    vivox9支不支持nfc(vivox9支不支持无线充电)

  • 抖音猪猪头像怎么拍(抖音猪头像可爱)

    抖音猪猪头像怎么拍(抖音猪头像可爱)

  • oppoa9x处理器相当于骁龙多少(oppoa9x处理器相当于天饥几)

    oppoa9x处理器相当于骁龙多少(oppoa9x处理器相当于天饥几)

  • 怎么阻止网络电话来电(怎么阻止网络电话打进来)

    怎么阻止网络电话来电(怎么阻止网络电话打进来)

  • cm应用锁在哪里(cm应用锁忘了手势,怎么取消)

    cm应用锁在哪里(cm应用锁忘了手势,怎么取消)

  • 怎么查欠费的手机号码(怎么查欠费的手机号欠了多少钱)

    怎么查欠费的手机号码(怎么查欠费的手机号欠了多少钱)

  • 华为9.1怎么升级(华为9.1怎么升级10.0)

    华为9.1怎么升级(华为9.1怎么升级10.0)

  • 快手怎么直播手机屏幕(快手怎么直播手游英雄联盟)

    快手怎么直播手机屏幕(快手怎么直播手游英雄联盟)

  • 手机闪光灯怎么开(手机闪光灯怎么才能一闪一闪)

    手机闪光灯怎么开(手机闪光灯怎么才能一闪一闪)

  • 圣胡安群岛,华盛顿州 (© Stephen Matera/Tandem Stills + Motion)(圣胡安岛战争)

    圣胡安群岛,华盛顿州 (© Stephen Matera/Tandem Stills + Motion)(圣胡安岛战争)

  • 脑电EEG代码开源分享 【4.特征提取-时频域篇】(egi脑电数据处理)

    脑电EEG代码开源分享 【4.特征提取-时频域篇】(egi脑电数据处理)

  • 又一个开源第一!飞桨联合百舸,Stable Diffusion推理速度遥遥领先(开源ei)

    又一个开源第一!飞桨联合百舸,Stable Diffusion推理速度遥遥领先(开源ei)

  • 退回代征手续费怎么做会计分录
  • 实收资本库存现金凭证怎么开
  • 运输公司轮胎如何做会计分录
  • 月收入不足10万免增值税的账务处理
  • 进料加工委托 加工费发票怎么开
  • 红字冲回是负数吗
  • 土地增值税预征管理办法
  • 每月末计提利息分录
  • 代收税款
  • 收到发票未付款可以抵扣吗
  • 收回多缴税金会计分录
  • 商业汇票贴现怎么做
  • 收到公益性捐赠所得税
  • 实物返利缴纳所得税吗?
  • 已缴契税是否可以在土地增值税扣除?
  • 打款给个体户
  • 机动车辆发票如何认证?
  • 确认收入后又退部分款怎么做账
  • 发票总金额怎么算折扣
  • 第二季度的利润表报错了,怎么重新报
  • 进口增值税发票怎么认证
  • 小规模纳税人缴纳增值税的会计科目
  • 收到发票最晚什么时候付款
  • w10电脑很卡
  • win10系统中怎么共享文件
  • 收回已冲销的应收账款分录
  • 常见的dump抓取方法
  • gsicon.exe是什么进程 作用是什么 gsicon进程查询
  • 出租厂房折旧可以税前扣除
  • 限制浏览器打开网页
  • 期房怎么交易流程
  • 往来账怎么处理
  • 如何分清福利性劳动
  • 如何使用nodejs
  • less预处理器详解
  • thinkphp6 数据库
  • yolov5 anchors 中 K-means聚类
  • k8s安装步骤
  • ts和js混用
  • php对象是什么类型的数据
  • 激活接口的命令
  • 结转成本 凭证
  • 材料暂估入库如何进行账务处理
  • 来料加工企业的税率是多少
  • 损益表填制
  • python中numpy数组和列表的区别
  • phpcms api
  • 运输公司开具的增值税专用发票谁抵扣
  • 全年一次性奖金并入或单独哪个好
  • 边际贡献总额什么意思
  • 销售劳务和销售货物的区别
  • 深圳增值税普通发票和专用发票的区别
  • 不单独计价的包装物是什么意思
  • 建设工程合同从完成承包的内容进行划分
  • 专票抵扣税款的会计分录
  • 土地摊销计入成本还是费用
  • 个体工商户开普票需要进项票吗
  • 小规模纳税人开专票税率是多少?
  • 民办非企业单位免税
  • 待摊费用和预付费用的区别
  • 没有取得增值税发票
  • mysql外键怎么写
  • linux系统中的输入输出分为三类
  • window msconfig
  • win7系统u盘打不开怎么办
  • win10预览版好吗
  • linux 详解
  • 如何注销windows账户登录
  • win8和win10怎么共享文件
  • linux tar -czvf
  • win7 32位旗舰版电脑城下载
  • .json()
  • cocos2dx官方教程
  • jquery点击按钮跳转页面
  • unity点击3d物体
  • node基础知识
  • 甘肃国家税务局官网app
  • 甘肃国家税务局官网
  • 福建省国税局电话号码
  • 苏州市区公司可以在园区买社保吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设