提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

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

2023-03-14 22:50:53 时间

代码实现

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


实现的效果


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

c6d56297c4904b798ddf1c2b3e40a574.png



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


image.png


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









相关文章