pdf.js 怎么预览 base64 类型的 pdf 文件

Posted 凯小默

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了pdf.js 怎么预览 base64 类型的 pdf 文件相关的知识，希望对你有一定的参考价值。

代码实现

<!DOCTYPE html>
<html>
    <head>
        <title>kiamo自定义渲染pdf页demo</title>
    </head>
    <body>
        <input type="file" onchange='handelChange(this)'/>
        <canvas id="canvas"></canvas>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.min.js"></script>
        <script>
            function handelChange (e) 
                console.log(e.files)
                var file = new File(e.files, "kaimo");
                var reader = new FileReader();
                // readAsDataURL方法可以将读取到的文件编码成DataURL ，可以将资料(例如图片、excel文件)内嵌在网页之中，不用放到外部文件
                reader.readAsDataURL(file);
                console.log(reader)
                // FileReader 提供一个完整的事件模型，用来捕获读取文件的状态
                // onload:文件读取成功时触发
                reader.onload = function () 
                    // base64格式PDF
                    console.log(reader.result);
                    // data:application/octet-stream;base64, 长度37
                    var base64Str = reader.result.substring(37);
                    renderPdf(base64Str);
                ;
                // onerror:读取文件错误时触发
                reader.onerror = function (error) 
                    console.log('Error: ', error);
                ;
            
            function renderPdf(base64Str) 
                var pdfjsLib = window['pdfjs-dist/build/pdf'];
                // Base64是一组类似的二进制到文本(binary-to-text)的编码规则，使得二进制数据在解释成radix-64的表现形式后可以用ASCII字符串的格式表示出来。Base64编码将数据转为“安全字符”用于传输，编码会使内容变长1/3。
                // atob() 对经过 base-64 编码的字符串进行解码。
                // btoa() 方法可以将一个二进制字符串（例如，将字符串中的每一个字节都视为一个二进制数据字节）编码为 Base64 编码的 ASCII 字符串。
                var pdfData = atob(base64Str);

                // GlobalWorkerOptions
                pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.min.js';
                
                // 异步下载pdf
                var loadingTask = pdfjsLib.getDocument(
                    data: pdfData
                );
                // 加载pdf
                loadingTask.promise.then(function(pdf) 
                    console.log('PDF loaded');
    
                    // 定义的pdf页面：这里使用第一页进行测试
                    var pageNumber = 1;
                    // 调用getPage方法获取对应的页面
                    pdf.getPage(pageNumber).then(function(page) 
                        // 倍数
                        var scale = 1.5;
                        // 展示的倍数：用于修改 viewer.html 的倍数
                        var viewport = page.getViewport(scale: scale);
                        
                        // 使用 canvas 绘制
                        var canvas = document.getElementById('canvas');
                        var context = canvas.getContext('2d');
                        canvas.height = viewport.height;
                        canvas.width = viewport.width;
                        
                        // 内容
                        var renderContext = 
                            canvasContext: context,
                            viewport: viewport
                        ;
                        // 渲染
                        var renderTask = page.render(renderContext);
                        renderTask.promise.then(function () 
                            console.log('渲染完毕');
                        );
                    );
                , function(error)
                    // pdf加载错误
                    console.error('loading error', error);
                )
            
        </script>
    </body>
</html>

实现的效果

我们选择文件，然后确定，这里我选了一个比较大的文件


然后等待一下，就会渲染完毕：

注意：这里只会展示一页。上一页下一页的功能可以自己拓展，另外也可以考虑使用 pdf.js 的预览页面通过 file 传递 blob 地址预览，这种自带额外工具栏，可以下载，翻页等。不过这就需要你把 base64 的数据转为 blob 的地址，还需要依赖 pdf.js 的预览页。

拓展

以上是关于pdf.js 怎么预览 base64 类型的 pdf 文件的主要内容，如果未能解决你的问题，请参考以下文章

vue-pdf.js 在线预览问题

Pdf.js：使用 base64 文件源而不是 url 呈现 pdf 文件

Pdf.js：使用base64文件源而不是url呈现pdf文件

pdfobject.js中怎么在新页面预览pdf文件

vue 上传图片时 base64 怎么传到java后台

js实现图片上传预览功能，使用base64编码来实现