表现与数据分离第一篇：mvc设计模式实现pdf数据流弹窗预览

最新推荐文章于 2022-10-28 14:30:22 发布

Take_Dream

最新推荐文章于 2022-10-28 14:30:22 发布

阅读量756

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/Take_Dream_as_Horse/article/details/78728125

版权

javascript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

吼吼吼：喊出程序员的心声，远离jsp，前后端分离！！！！！！

1、常用的js开发模式，尤其是jquery开发模式，一般都是重复累赘的书写，毫无维护性和可读性而言，例如

要是有一天id变了，需求变了，就jj了

2、所以，设计模式是多么多么的重要，本文只阐述简单的mvc设计模式，淌水不深，有什么问题还望各位大神多多指点！

3、例如，现在需求来了,需要一个pdf数据流预览弹窗，可以上下翻页，类似这种

4、mvc设计模式的开始。。。

（1）用到的技术：jquery、pdf.js ( 链接：http://mozilla.github.io/pdf.js/ ）

（2）html结构：

<body>

    <!-- pop弹窗 -->
    <div class="index-wrapper">
        <span title="上一张" class="toggle-hook prev-btn" data-type="prev"> < </span>
        <span title="下一张" class="toggle-hook next-btn" data-type="next"> > </span>
        <div class="canvas-page">
            <!-- pdf的canvas容器 -->
            <canvas id="the-canvas" class="canvas-cont"></canvas>
            <div class="page">
                <span>页码: <span class="page-num-hook">0</span> / <span class="page-count-hook"></span></span>
            </div>
        </div>
    </div>


    <!-- plugin -->
    <script src="js/pdf.js" type="text/javascript"></script>
    <script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>

    <!-- 自定义的js -->
    <script src="js/index.js" type="text/javascript"></script>

</body>

（3）model层返回初始化数据，并且根据用户事件返回处理后的新数据

/*
     * 定义pdfModel
     * 所有的数据初始化和更改在model层进行
    */
    pdfController.model = {
        PDFJS: PDFJS,
        src: pdfWorkSrc,
        pdfData: atob(
                  `JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog
                    IC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAv
                    TWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0K
                    Pj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAg
                    L1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+
                    PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9u
                    dAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2Jq
                    Cgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJU
                    CjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVu
                    ZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4g
                    CjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAw
                    MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v
                    dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G`
                  ),
        setSrc: function() {
            this.PDFJS.workerSrc = this.src;
        },
        loadPdf: function() {
            this.setSrc();
            pdfController.view.updatePdf();
        },
        pageNum: 1,
        pageCount: 10,
        type: 'next', // 翻页类型
        initData: function() {
            // http请求，获取pdf数据
        },
        // 上下翻页
        togglePage: function (type) {
            if(!type) return;
            if(type === 'next') {
                if(this.pageNum === this.pageCount) return;
                this.pageNum ++;
            }else {
                if(this.pageNum === 1) return;
                this.pageNum --;
            }
            this.onchange();
        },
        //通知视图更新
        onchange: function () {
            pdfController.view.pageChange();
            pdfController.view.updatePdf();
        },
        getPageNum: function() {
            return this.pageNum;
        },
        getPageCount: function() {
            return this.pageCount;
        },
        getPdfData: function() { // 返回pdf的相关数据
            return {
                PDFJS: this.PDFJS,
                pdfData: this.pdfData
            }
        }
    };

（4）view层，负责更新视图，所有的dom操作都在view层进行

/*
     * 定义pdfView
     * 所有的dom操作只在view层进行
    */
    pdfController.view = {
        // 初始化
        start: function () {
            this.pageChange();
            this.initPdf();
            $('.toggle-hook').click(this.onClick);
        },
        onClick: function() { // 初始化分页点击事件
            pdfController.setPage($(this).data('type'));
        },
        // 更新视图的页码
        pageChange: function () {
            $('.page-num-hook').html(pdfController.model.getPageNum());
            $('.page-count-hook').html(pdfController.model.getPageCount());
        },
        initPdf: function() { //初始化pdf图
            pdfController.setPdf();
        },
        // 更新pdf图
        updatePdf: function() {
            // 这里要判断，如果已经绘制过，则return
            var pdfData = pdfController.model.getPdfData();
            var loadingTask = pdfData.PDFJS.getDocument({data: pdfData.pdfData});
            // 加载pdf方法
            loadingTask.promise.then(function(pdf) {
              console.log('PDF加载完成');
              // 页面
              pdf.getPage(1).then(function(page) {
                console.log('页面初始化完成');
                var scale = 1.5;
                var viewport = page.getViewport(scale);
                // 准备canvas的数据
                var canvas = document.getElementById('the-canvas');
                var context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;
                // 将pdf数据写入canvas
                var renderContext = {
                  canvasContext: context,
                  viewport: viewport
                };
                var renderTask = page.render(renderContext);
                renderTask.then(function () {
                  console.log('页面渲染完成');
                });
              });
            }, function (reason) {
              // PDF 加载出错
              console.error(reason);
            });
        }
    };

    // 初始化
    pdfController.start();

（5）controller层，关联view(视图)和model(数据)

// pdf.worker.js路径
    const pdfWorkSrc = 'js/pdf.worker.js';

    // 服务器url
    const httpUrl = '';

    //定义pdfController
    var pdfController = {
        // 初始化视图
        start: function () {
            this.view.start();
            this.model.initData(); // 初始化model层数据
        },
        setPage: function (type) {
            this.model.togglePage(type); // 上、下翻页映射到数据模型
        },
        setPdf: function() {
            this.model.loadPdf(); // 加载pdf图的数据模型
        }
    };

Take_Dream

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
表现与数据分离第一篇：mvc设计模式实现pdf数据流弹窗预览

吼吼吼：喊出程序员的心声，远离jsp，前后端分离！！！！！！1、常用的js开发模式，尤其是jquery开发模式，一般都是重复累赘的书写，毫无维护性和可读性而言，例如要是有一天id变了，需求变了，就jj了2、所以，设计模式是多么多么的重要，本文只阐述简单的mvc设计模式，淌水不深，有什么问题还望各位大神多多指点！3、例如，现在需求来了
复制链接

扫一扫

专栏目录