vue 预览 pdf pdf.js 的具体使用

1、下载依赖

javascript 复制代码
npm  install pdfjs-dist@2.2.228

2、在需要用的页面引入

javascript 复制代码
<script>
   import * as PDFJS from 'pdfjs-dist';
   export default{
      data(){
          return{
            
        }
     },
     created(){
       PDFJS.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.min.js')
     },
     mounted(){
       this.hanle()
     }
   }
</script>

3、其它都在methods

javascript 复制代码
     //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) {
            pdf.getPage(i).then(function(page) {
                var scale = 1.67;
                var viewport = page.getViewport(scale);
                //
                //  准备用于渲染的 canvas 元素
                //
                var canvas = document.getElementById(id);
                var context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;

                //
                // 将 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
//如果pdf加密了 就用下面的obj
          let obj = {
               url:_this.dataurl,
               password:'你的密码'
          }
//如果pdf没有加密 就路径就好
    let obj = {
               url:_this.dataurl
          }
            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);
                }

            });
        },

4、页面

javascript 复制代码
    <div class="left" ref="content">
               <div ref="pdfViewer" id="pdf-container" class="pdfView" v-loading="loadings"></div>
             </div>
相关推荐
前端小巷子6 分钟前
Web开发中的文件上传
前端·javascript·面试
翻滚吧键盘1 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹1 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
前端风云志1 小时前
typescript结构化类型应用两例
javascript
gnip2 小时前
总结一期正则表达式
javascript·正则表达式
Q_970956392 小时前
java+vue+SpringBoo校园失物招领网站(程序+数据库+报告+部署教程+答辩指导)
java·数据库·vue.js
爱分享的程序员2 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘2 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
你这个年龄怎么睡得着的2 小时前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
南屿im3 小时前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript