pdfjs 展示base64编码的pdf文件

最新推荐文章于 2024-02-21 10:48:31 发布

WellStar520

最新推荐文章于 2024-02-21 10:48:31 发布

阅读量2.5k

点赞数 1

分类专栏： pdf.js 文章标签： html5 javascript html

本文链接：https://blog.csdn.net/e78com5959ws77/article/details/120573375

版权

pdf.js 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

pdfjs自定义展示base64编码的pdf文件实际上和我们展示一个pdf文件几乎一致。参考我们

pdfjs 基础使用教程（二）_e78com5959ws77的博客-CSDN博客文章代码如下

<!DOCTYPE html>
<html>
    <head>
        <title>自定义渲染pdf页demo</title>
    </head>
    <body>
        <canvas id="canvas"></canvas>
        <script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
        <script>
            var pdfjsLib = window['pdfjs-dist/build/pdf'];

            var pdfurl = 'https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf';
            var pdfData = atob(
                'JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog' +
                'IC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAv' +
                'TWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0K' +
                'Pj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAg' +
                'L1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+' +
                'PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9u' +
                'dAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2Jq' +
                'Cgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJU' +
                'CjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVu' +
                'ZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4g' +
                'CjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAw' +
                'MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v' +
                'dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G');
            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';
            
            //异步下载pdf 这里面把pdfurl换位base64对象即可
            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 id这里面我定义的就叫canvas
                    var canvas = document.getElementById('canvas');
                    //这里面获得一个画笔
                    var context = canvas.getContext('2d');
                    //这里面定义canvas的宽高
                    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(reason){
                //pdf加载错误 原因有很多 比如文件错误这种的话属于不可解决问题  比如pdf有密码 这种就可以在这里处理
                console.log('loading error')
                //pdfjs 自己编辑的错误码        
                console.error(reason);
            })
        </script>
    </body>
</html>

然后打开我们的html页面

完美渲染基础交流群 799827663

WellStar520

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
pdfjs 展示base64编码的pdf文件

pdfjs自定义展示base64编码的pdf文件实际上和我们展示一个pdf文件几乎一致。参考我们pdfjs 基础使用教程（二）_e78com5959ws77的博客-CSDN博客文章代码如下<!DOCTYPE html><html> <head> <title>自定义渲染pdf页demo</title> </head> <body> <canvas id
复制链接

扫一扫