html elementui预览pdf文件前端预览pdf文件

转载

definitely 2024-04-01 15:11:46

文章标签 vue.js 前端 html 跨域 github 文章分类 机器学习人工智能

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>

测试结果

html elementui预览pdf文件前端预览pdf文件_前端

优点：简单，支持大部分 PC 浏览器（IE 不支持）。跨域资源同样可以（无需 cors）
缺点：不支持移动端浏览器，不支持 IE 等低版本浏览器。样式无法自定义。

pdfjs-view

测试地址，方案兼容性比较好，需要资源同域或者 cors跨域，可以自定义样式。

使用方式

自己部署一个 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

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

测试结果

html elementui预览pdf文件前端预览pdf文件_vue.js_02

优点：支持大部分浏览器（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)
    })

}
)()

测试结果

html elementui预览pdf文件前端预览pdf文件_跨域_03