解析base64数据流---加载pdf

先pdf文件放在服务器上，获得具体文件路径。

在utils.js配置文件中

/*string -> Unit8Array*/
function char2buf(str) {
    var out = new ArrayBuffer(str.length);
    var u16a = new Uint8Array(out);
    var strs = str.split("");
    for (var i = 0; i < strs.length; i++) {
        u16a[i] = strs[i].charCodeAt();
    }
    return u16a;
}

//PDF.js插件定义的对象，给定pdf文件的URL或者一个Uint8Array数组，调用PDFJS.getDocument()可以获取
var pdfDoc = null;
//缩放比例
var scale = 1;
//pdf文件的总页数
var count = 1;
/*将解码后的值传给PDFJS.getDocument(),交给pdf.js处理*/
var showPdfFile = function(pdf) {
    var data = char2buf(window.atob(pdf));
    pdfjsLib.getDocument({
        data: data,
        cMapUrl: 'lib/pdf.js/web/cmaps/',
        cMapPacked: true
    }).then(function(pdfDoc_) {
        pdfDoc = pdfDoc_;
        count = pdfDoc.numPages;
        //绘制所有的页面
        renderAll();
    });
};
var isRead = false;
var readTime = 5;
var showPdfFileTF = function(pdf) {
    var data = char2buf(window.atob(pdf));
    pdfjsLib.getDocument({
        data: data,
        cMapUrl: 'lib/pdf.js/web/cmaps/',
        cMapPacked: true
    }).then(function(pdfDoc_) {
        pdfDoc = pdfDoc_;
        count = pdfDoc.numPages;
        //绘制所有的页面
        renderAllTF();
    });
    if (isRead) {
        $('#pdf-containerTF ion-scroll').css('height', '90%');
        readTime = 5;
        $('#validateRead').show();
        $('#validateRead').text('我已阅读(' + readTime + 's' + ')');
        var read = function() {
            readTime--;
            $('#validateRead').text('我已阅读(' + readTime + 's' + ')');
            if (readTime <= 0) {
                $('#validateRead').text('我已阅读').css('background', '#ff8400');
                clearInterval(timeId);
            }
        }
        var timeId = setInterval(read, 1000);
    } else {
        $('#pdf-containerTF ion-scroll').css('height', '100%');
    }
}
var showPdfFileList = function(pdf) {
    for (var i = 0; i < pdf.length; i++) {
        showPdfFile(pdf[i])
    }
}
var showPdfFileListTF = function(pdf) {
    for (var i = 0; i < pdf.length; i++) {
        showPdfFileTF(pdf[i])
    }
}

function renderPage(num, canvas) {
    // Using promise to fetch the page
    pdfDoc.getPage(num).then(function(page) {
        var ctx = canvas.getContext('2d');
        var viewport = page.getViewport(scale);

        canvas.height = viewport.height;
        canvas.width = viewport.width;

        // Render PDF page into canvas context
        var renderContext = {
            canvasContext: ctx,
            viewport: viewport
        };
        var renderTask = page.render(renderContext);

        // Wait for rendering to finish
        renderTask.promise.then(function() {
            //这是每次绘制一页内容之后的回调函数
            // console.log("Page" + num + " rendered");
        });
    });
}
var initial = null;

function renderPageTF(num, canvas) {
    // Using promise to fetch the page
    pdfDoc.getPage(num).then(function(page) {
        var ctx = canvas.getContext('2d');
        var viewport = page.getViewport(1);
        var s = (parseInt($('#pdf-containerTF ion-scroll').css('width'), 10) / viewport.width).toFixed(4);
        if (initial == null || initial > s) {
            initial = s;
        }
        //$('#pdf-popTF').css({ 'transform': 'translate(-20%,0px) scale(' + initial + ')' });
        //根据媒体查询，判断窗口大小start
        function myFunction(x) {
            if (x.matches) { // 媒体查询
                $('#pdf-popTF').css({ 'transform': 'translate(-20%,0px) scale(' + initial + ')' });
            } else {
                $('#pdf-popTF').css({ 'transform': 'translate(0%,0px) scale(' + null + ')' });
            }
        }
        var x = window.matchMedia("(max-width: 700px)")
        myFunction(x) // 执行时调用的监听函数
        x.addListener(myFunction) // 状态改变时添加监听器
        //根据媒体查询，判断窗口大小end
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        // Render PDF page into canvas context
        var renderContext = {
            canvasContext: ctx,
            viewport: viewport
        };
        var renderTask = page.render(renderContext);

        // Wait for rendering to finish
        renderTask.promise.then(function() {
            //这是每次绘制一页内容之后的回调函数
            // console.log("Page" + num + " rendered");
        });
    });
}

function renderAll() {
    for (var curPage = 1; curPage <= count; curPage++) {
        //新建一个<canvas>用于，并将对应页面的内容绘制到这个canvas上
        var canvas = document.createElement("canvas");
        var div = document.createElement("div");
        $(div).attr("id", "page" + curPage);
        $(div).attr("class", "page");
        $(div).append(canvas);
        $("#pdf-pop").append(div);
        renderPage(curPage, canvas);
    }
}

function renderAllTF() {
    initial = null;
    for (var curPage = 1; curPage <= count; curPage++) {
        //新建一个<canvas>用于，并将对应页面的内容绘制到这个canvas上
        var canvas = document.createElement("canvas");
        var div = document.createElement("div");
        $(div).attr("id", "page" + curPage);
        $(div).attr("class", "page");
        $(div).append(canvas);
        $("#pdf-popTF").append(div);
        renderPageTF(curPage, canvas);
    }
}

　　

 

 

 

在html中：

 <div ng-if="$index == 0 && obj.showContent" style="height:400px;padding:5px 14px;">
                            <div style="height:100%;" ng-if="showPdfFlagTF1">
                                <div id="pdf-containerTF"
                                    style="width: 100%; height: 100%; border-radius: 10px; box-shadow: 0 0 10px #3268d2; background: #ffffff;padding: 10px;">
                                    <ion-scroll delegate-handle="pdfScroll1" zooming="true" direction="xy"
                                        style="width: 100%; height: 100%;" scrollbar-y="false" scrollbar-x="false"
                                        min-zoom="1">
                                        <div id="pdf-popTF"
                                            style="width: 100%; height: 100%;border-radius: 10px; background: #ffffff;margin: 0px;position: absolute;padding: 0px;">
                                        </div>
                                    </ion-scroll>
                                </div>
                            </div>
                        </div
</div>
注意：若一个页面需要多个这样的pdf被加载，在粘贴复制html部分时应该注意-----id不能变化，因为在封装的公共方法中是用jQ按照id来查找的。

 在js中：

  //展示pdf
        $scope.showPdfFlag = false;
        $scope.showPdfFlagTF = false;
        $scope.loadFlag = false;
        $scope.contain='';

        $scope.openPdfDialog = function (path) {
            $ionicLoading.show({});
            zytHttp.post("ZYT_TB_027", { urlPath: path }, function (data) {
                if (data.item.file) {
                    $scope.contain=data.item.file;
                    console.log($scope.contain);
                    $timeout(function () {
                        $scope.showPdfFlagTF = true;
                        $scope.loadFlag = true;
                        showPdfFileTF(data.item.file);
                        $ionicLoading.hide();
                        $scope.$apply();
                    }, 1000);
                } else {
                    $ionicLoading.hide({});
                    alert({ type: 'error', title: '错误', msg: data.error.msg, foot: '返回重试' });
                }
            }, function (data) {
                $ionicLoading.hide({});
            })
        };

        $scope.showDetail = function () {
            var path = '';
            //条款
            path = '/share/file/static/TPYX2018.pdf' ? '/share/file/static/TPYX2018.pdf' : '/share/file/static/TPYX2018WN.pdf';
            if($scope.contain){
                // var content=JSON.parse($scope.contain);
                showPdfFileTF($scope.contain);
            }else{
                $scope.openPdfDialog(path)
            }
        }


        //点击显示条款内容
        $scope.changeShowContent = function (index, type) {
            if (type == 0) {
                if (!$scope.statements[index].showContent) {
                    $scope.showDetail();
                }
                $scope.statements[index].showContent = !$scope.statements[index].showContent;
                $ionicScrollDelegate.$getByHandle('contentScroll').resize();
            } else {
                if (!$scope.statements[index].showContent) {
                    $scope.showDetail();
                }
                $scope.statements1[index].showContent = !$scope.statements1[index].showContent;
                $ionicScrollDelegate.$getByHandle('contentScroll').resize();
            }
        };