发布时间:2023-08-30 16:00
由于在搭建个人博客时,想实现在线预览 pdf 格式的个人简历,经过查阅大致有三大类实现方案;本文共涉及以下 5 种实现方案,如下所示:
使用 HTML 标签
使用第三方插件
PDF 文件转化成图片进行展示
第一类方案:使用 HTML 标签的实现预览效果最为简单,但兼容性最差,仅支持部分 PC 端的浏览器,移动端浏览器兼容非常差。
第二类方案:使用第三方库的功能强大,还可对 pdf 文件进行操作,PC 端兼容性比较好,但在移动端会有 pdf 文件显示不全的 bug 出现,而且在移动端浏览器兼容性一般。
第三类方案:PDF 文件转化成图片进行展示的兼容性最好,能同时在 PC 端和移动端预览,但由于是图片格式,所以选中 pdf 文件上的文件,更加无法继续宁操作。
因为我的个人博客尚未实现适配移动端,所以选择了第二类方案。
该类方法实现简单,但兼容性很差,慎重选择。
HTML 内联框架元素 iframe 表示嵌套的 browsing context。它能够将另一个 HTML 页面嵌入到当前页面中。
<iframe src="./test.pdf" height="900px;" width="800px"></iframe>
HTML embed 元素将外部内容嵌入文档中的指定位置。此内容由外部应用程序或其他交互式内容源(如浏览器插件)提供。
embed 标签实现方案代码如下所示:
<embed src="./test.pdf" type="application/pdf" width="100%" height="100%" />
HTML object 元素(或者称作 HTML 嵌入对象元素)表示引入一个外部资源,这个资源可能是一张图片,一个嵌入的浏览上下文,亦或是一个插件所使用的资源。
object 标签实现方案代码如下所示:
<object
data="./test.pdf"
type="application/pdf"
width="100%"
height="100%"
></object>
能实现实时预览 pdf 的插件还有许多种,但使用最多的是 PDF.js 与 PDFObject,所以本文只涉及这两个插件。
PDF.js 是一款开源的 pdf 文档读取解析插件,可以实现在 html 下直接浏览 pdf 文档。
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。 |
更多的细节请参照官网
该方法是以图片形式来展示 PDF 文档,所以不能选中文本或复制文本。
具体步骤如下:
具体代码如下:
// 第 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>
这里的内容非常重要,可以避免踩坑。我就是在这浪费了足足两天的时间,最终才找到解决办法。
原因:因为 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 文件。
具体步骤:
另外使用 pdf.js 打开发票等文件时可能会出现字体显示不全的 bug,可参照该博客解决 pdf.js 无法完全显示 pdf 文件内容的问题。
相对 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 总结
使用步骤:
<!-- 第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等等。
把 PDF 转换为图片也有很多控件处理,例如 Aspose.Pdf、Spire.Pdf、 pdfiumviewer 等等,不同的第三方类库使用的方法有所差异,不过思路都很类似。
由于转成图片将无法复制或选中 PDF 文档的文本,所以我没使用该方法,就没进行进一步研究。大家可去参照其他博客。
码字不易,觉得有帮助的朋友点赞,关注走一波。
如果对本文存在疑惑,可在评论区讨论,欢迎大家指正文中的错误观点。
高性能 Jsonpath 框架,Snack3 3.2.29 发布
java基础巩固-宇宙第一AiYWM:为了维持生计,手写RPC01~Version01整起
支持Nacos 2.1.0!这套Spring Cloud Gateway + Oauth2 微服务权限终极解决方案升级了!
CPU之外,国产芯片再突破,再也不用看AMD和NVIDIA的脸色了
anaconda配置pytorch(无需单独安装python)
容器:docker——使用 dockerfile 构建镜像和使用 docker compose 管理镜像