用jquery插件实现pdf文件的在线预览，大概是怎么个思路

图一是pdf阅览分页，图二是pdf阅览不分页，
能给说一下pdf阅览大概的思路了，我看这里面有canvas

<script type="text/javascript">
if (!($.browser.msie && parseInt($.browser.version) < 10)) {
    PDFJS.workerSrc = '{{MEDIA_URL}}js/pdf.worker.js';
    $('#file-view').html('<div id="pdf"><span class="loading-icon loading-tip"></span></div>');
    PDFJS.getDocument("{{ raw_path|escapejs }}").then(function(pdf) {
        var $loadingTip = $('#pdf .loading-tip');

        // show at most 50 pages
        var shownPageCount = pdf.numPages < 50 ? pdf.numPages : 50;

        var getPageAndRender = function (pageNumber) {
            pdf.getPage(pageNumber).then(function(page) {
                var scale = 1.5;
                var viewport = page.getViewport(scale);
                var $canvas = $('<canvas class="pdf-page"></canvas>').attr({
                    'height': viewport.height,
                    'width': viewport.width
                });
                $loadingTip.before($canvas);
                page.render({
                    canvasContext: $canvas[0].getContext('2d'),
                    viewport: viewport
                });

                if (pageNumber < shownPageCount) {
                    pageNumber++;
                    getPageAndRender(pageNumber);
                } else {
                    // the last page
                    $loadingTip.hide();
                }
            });
        };

        // start from page 1
        getPageAndRender(1);
    });

} else {
    var tip = "{% trans "You can use IE 10 or other browsers, for example, Firefox, to view it online." %}";
    $('#file-view').html('<div id="file-view-tip"><p>' + tip + '</p></div>');
}
</script>