pdf.js 预览加密的pdf文件

1、

npm  install pdfjs-dist@2.2.228

2、在使用它的页面

<script>
import * as PDFJS from 'pdfjs-dist';
</script>
  created(){
     PDFJS.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.min.js')
    },
    mounted(){
     this.hanle()
    },
   //pdf 创建画布
     createPdfContainer(id,className) {
            var pdfContainer = document.getElementById('pdf-container');
            var canvasNew =document.createElement('canvas');
            canvasNew.id = id;
            canvasNew.className = className;
            pdfContainer.appendChild(canvasNew);
            this.loadings = false
     },
     // 渲染pdf 给pdf定宽度
     renderPDF(pdf,i,id) {
          const _this = this
            pdf.getPage(i).then(function(page) {
                var scale = 1.67  * (_this.scale > 1 ? _this.scale : 1);
                var viewport = page.getViewport(scale);
                //  准备用于渲染的 canvas 元素
                var canvas = document.getElementById(id);
                var context = canvas.getContext('2d');
                canvas.height = viewport.height
                canvas.width = viewport.width
               // canvas.heif
                // 将 PDF 页面渲染到 canvas 上下文中
                var renderContext = {
                    canvasContext: context,
                    viewport:viewport
                };
                page.render(renderContext);
            });
     },
        //创建和pdf页数等同的canvas数
    createSeriesCanvas(num,template) {
               const _this = this
            var id = '';
            for(var j = 1; j <= num; j++){
                id = template + j;
                _this.createPdfContainer(id,'pdfClass');
            }

     },
     hanle() {
          const _this= this
          _this.loadings = true
          let obj = {
               url:_this.dataurl,
               password:'自己的密码'
          }
            PDFJS.getDocument(obj).then(function(pdf) {
                //用 promise 获取页面
                var id = '';
                var idTemplate = 'cw-pdf-';
                var pageNum = pdf.numPages;
                //根据页码创建画布
                _this.createSeriesCanvas(pageNum,idTemplate);
                //将pdf渲染到画布上去
                for (var i = 1; i <= pageNum; i++) {
                    id = idTemplate + i;
                    _this.renderPDF(pdf,i,id);
                }

            });
        },

3、html

 <div ref="pdfViewer" id="pdf-container" class="pdfView"></div>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值