pdf 预览整理

# pdf 预览整理

pdf 预览属于播放资源格式的一种预览， PDF的预览行为是浏览器插件（浏览器厂商实现的），浏览器对Content-Type 为 application/pdf 的GET请求的默认行为是下载文件。
一些浏览器自身默认是支持pdf 预览的
要实现可靠的、样式定制、表现一致的网页端对PDF预览，只能使用js 插件实现。

# 使用iframe、embed、object 标签直接加载

使用浏览器标签加载优缺点如下：优点

成本低，适合作为渐进增强。
简单，不依赖于前端。

缺点：

不是所有浏览器都有实现 PDF 文件预览，没有实现预览的浏览器会触发 PDF 文件的下载行为。
不能定制化（包括外表样式、个性化）
浏览器实现预览的效果各不相同，而且和浏览器的版本有关（可能有些版本的预览功能有 bug）

# iframe 标签

所有浏览器都支持 < iframe > 标签，直接将src设置为指定的PDF文件就可以预览了。此外可以把需要的文本放置在 < iframe > 和之间，这样就可以应对无法理解 iframe 的浏览器，比如下面的代码可以提供一个PDF的下载链接：

<iframe src="/test.pdf" width="100%" height="100%" allowfullscreen="true" scolling="no"> </iframe>

# object 标签

‘

<object data="/test.pdf" width="100%" height="100%" allowfullscreen="true" scolling="no"> </object>

#

标签定义嵌入的内容，比如插件。在HTML5中这个标签有4个属性：

属性	值	描述
height	pixels	设置嵌入内容平高度
width	pixels	设置嵌入内容的宽度
type	type	定义嵌入内容的类型
src	url	嵌入内容的URL

embed是HTML5新标签支持IE9以上和主流浏览器。

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

# PDFObject

PDFObject并不是一个PDF渲染工具，它也是通过< embed >标签实现PDF预览：
https://blog.csdn.net/qappleh/article/details/80250492
github star 1.9k
PDFObject不是一个呈现引擎。PDFObject只是写了一个元素，并依赖浏览器或浏览器插件来呈现PDF。如果浏览器不支持嵌入式PDF，则PDFObject无法强制浏览器呈现PDF。如果你需要强制浏览器显示PDF，我们建议使用Mozilla的PDF.js。请注意，PDF.js受到其自身的限制，例如跨域安全限制。PDFObject和PDF.js可以很好地结合在一起，在下面的示例部分有一些很好的PDF.js示例的链接。 PDFObject不提供自定义PDF工具栏外观的功能。工具栏由浏览器控制，并且会因浏览器的不同而有很大的不同(Chrome、Safari和Firefox等)。其中一些浏览器提供了通过PDF打开参数显示或隐藏工具栏的功能，或者提供了搜索字段等功能。但是，一般来说，浏览器不提供任何自定义工具栏的机制。如果你真的需要定制工具栏，试着用Mozilla的PDF.js来定制它以满足你的需求。
PDFObject 不支持手机浏览器。

<!-- insert just before the closing body tag </body> -->
<script src='/path-to-your-javascript-file/pdfobject.js'></script>
<script>
PDFObject.embed("index.pdf");
</script>

1
2
3
4
5

# pdf.js

PDF.js 是 mozilla 开源的 JS 库，大概实现原理是利用算法将 PDF 转换为 js 数据结构然后利用 canvas 在网页中复现.
PDF.js是一个使用HTML5构建的可移植文档格式(PDF)查看器，它允许你在网页中解析和渲染PDF文件。PDF.js是由社区驱动的，并得到Mozilla的支持。我们的目标是创建一个通用的、基于web标准的平台来解析和呈现pdf文件。
PDF Viewer 有谷歌火狐插件

优点

mozilla 出品，现在仍在更新,github 代码更新活跃
不依赖浏览器的PDF预览插件，大概实现原理是利用算法将 pdf 转换为数据结构，然后在 canvas 上输出
提供若干 API 接口，可以自行封装换页等插件.
github Star 36.2k

缺点

不支持点版本IE
体积比较大（约3M）

# 目前项目使用PDF 流程（vue 项目）

在github 下载源码（https://github.com/mozilla/pdf.js）
把build文件夹放到 vue项目（vue-cli3）public/static/pdf，目录id 为如下：
直接在iframe 标签设置url
编译后的静态文件大小约有3M


<iframe :src="pdfSrc" width="100%" height="100%" allowfullscreen="true" scolling="no"> </iframe>


url = `pubilc/pdf/web/viewer.html?file=${encodeURIComponent(val)}`;

1
2
3
4
5

this.pdfSrc = url

pdf js 使用两种方式加载 pdf 文件

pdfjs-viww

自己部署一个 pdfjs-view。（推荐，更稳定）

下载项目，然后项目分为两个版本/web/viewer-1.html 和 /legacy/web/viewer.html 。legacy 支持低版本浏览器，使用 es5 编写，讲道理采用这个方案，你肯定也是为了兼容所有浏览器。(没有的话，就 gulp generic-legacy 生成一份) 然后将相关内容复制到你的目录，上传 FTP。本质来讲他就是一个 HTML 文件，所以你可以针对他进行一些修改，比如说主题颜色、隐藏下载按钮等等。

使用 CDN 或者官方提供的 pdfjs-view。（不推荐，不稳定，异常CORS）

https://mozilla.github.io/pdf.js/legacy/web/viewer.html https://mozilla.github.io/pdf.js/web/viewer.html

pdfjs-canvas 方案比较复杂，需要自己实现一套预览配套的内容（分页、放大缩小）

(function() {
    let el = document.getElementById('canvasWrap');
    if (!el) {
        el = document.createElement('div')
        el.id = 'canvasWrap'
        document.body.appendChild(el)
    }
    el.innerHTML = ''
    let winW = document.documentElement.clientWidth
    // 加载 pdf 资源
    let loadingTask = pdfjsLib.getDocument('https://www.lilnong.top/static/pdf/B-4-RxJS%E5%9C%A8React%E4%B8%AD%E7%9A%84%E5%BA%94%E7%94%A8-%E9%BE%99%E9%80%B8%E6%A5%A0_.pdf')
    // PDF 加载完成的回调。
    loadingTask.promise.then(function(pdf) {
        console.log('pdf', pdf)
        // 可以获取到总页数。
        let pageNum = pdf.numPages
        var _pageNum = 1;
        var renderPageToCanvas = function(pageNum, auto=false) {
            // 获取其中的一个页面
            pdf.getPage(pageNum).then(function(page) {
                // you can now use *page* here
                _pageNum = pageNum
                // 获取原始大小的数据
                var viewport = page.getViewport({
                    scale: 1,
                });
                var scale = (500 / viewport.width).toFixed(2)
                viewport = page.getViewport({
                    scale: scale
                });
                var canvas = document.createElement('canvas');
                el.appendChild(canvas)
                var context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;
                
                // 创建了一个canvas画板用来存放
                var renderContext = {
                    canvasContext: context,
                    viewport: viewport
                };
                page.render(renderContext);
                if (auto)
                    renderPageToCanvas(pageNum + 1, auto);
            });
        }
        renderPageToCanvas(_pageNum, true);
        canvasPrev.onclick = function() {
            renderPageToCanvas(Math.max(_pageNum - 1, 1));
        }
        canvasNext.onclick = function() {
            renderPageToCanvas(Math.min(_pageNum + 1, pdf.numPages));
        }
    }, function(reason) {
        console.error(reason)
    })
  }
)()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

官方实现阅读器

# 参考文档

https://blog.hubspot.com/marketing/best-free-pdf-reader
https://github.com/parallax/jsPDF
https://blog.hubspot.com/marketing/best-free-pdf-reader
https://www.cnblogs.com/wuhuacong/p/9566764.html ****
https://github.com/pipwerks/PDFObject/
https://pspdfkit.com/pdf-sdk/ios/viewer/
https://code.tutsplus.com/tutorials/how-to-create-a-pdf-viewer-in-javascript--cms-32505
https://blog.csdn.net/jianyuerensheng/article/details/79570781

编辑

上次更新: 2021/11/09, 09:11:45

pdf 预览整理