关于javascript:前端预览-PDF-文件使用PDFJS

哈喽大家好啊。前半年还挺忙的，始终也没有发文章，有老哥想我了嘛。这两天发现老有人 私信问我 PDF 相干的内容。

那么好，为了我能安心摸鱼，我筹备出一篇文章来介绍一下 如何应用 PDFJS 。

PDF.js 是什么？

PDF.js 由 Mozilla 提供反对。指标是创立一个通用的、基于 Web 规范的平台，用于解析和出现 PDF。

预览 PDF

应用 iframe、embed、新窗口关上

测试地址，计划比较简单，属于 看天吃饭，全靠浏览器爸爸赏。

应用形式

<embed src="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">

<iframe src="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"></iframe>

测试后果

长处：简略，反对大部分 PC 浏览器（IE 不反对）。跨域资源同样能够（无需 cors）
毛病：不反对挪动端浏览器，不反对 IE 等低版本浏览器。款式无奈自定义。

pdfjs-view

测试地址，计划兼容性比拟好，须要资源同域 或者 cors 跨域，能够自定义款式。

应用形式

1. 本人部署一个 pdfjs-view。（举荐，更稳固）

   1. 下载我的项目，而后我的项目分为两个版本/web/viewer-1.html 和 /legacy/web/viewer.html。legacy 反对低版本浏览器，应用 es5 编写，讲道理采纳这个计划，你必定也是为了兼容所有浏览器。(没有的话，就 gulp generic-legacy 生成一份)
   2. 而后将相干内容复制到你的目录，上传 FTP。
   3. 实质来讲他就是一个 HTML 文件，所以你能够针对他进行一些批改，比如说 主题色彩 、 暗藏下载按钮 等等。

2. 应用 CDN 或者官网提供的 pdfjs-view。（不举荐，不稳固，异样 CORS）

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

<iframe src="https://www.lilnong.top/static/project?file=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"></iframe>

<iframe src="https://www.lilnong.top/static/project/pdfjs-es5-2.5.207/web/viewer-1.html?file=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"></iframe>

测试后果

同上，能够看到 IE 都反对，挪动端也 OK。

长处：反对大部分浏览器（PC、M 端都反对）。跨域资源须要 cors。款式能够自定义。
毛病：须要部署一个 view。

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)
    })

}
)()

测试后果

兼容性也还能够，须要依赖 canvas。

下载 PDF

1. 下载头

2. 间接关上

   1. 如果浏览器不反对解析 PDF 那么能够触发下载。
   2. 如果浏览器反对解析 PDF，那么会变成预览。
   1. 这个时候咱们能够给 a 标签加上 download 来触发下载。（须要同域）

总结一下

通过下面的内容咱们能够 实现前端预览 PDF 性能 了，咱们来总结一下各个计划的特色。

好了，还须要什么内容欢送留言啊。我给更新到外面。