解析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();
            }
        };