在base64url的ioinic应用程序中显示pdf

时间:2016-08-29 12:40:21

标签: cordova pdf ionic-framework

Hello World,            我收到了base64url "JVBERi0xLjMKMSAwIG9iago8...mVmCjM3MjgxCiUlRU9GCg=="
 从Web服务器,我能够将此字符串转换为blob并使用下面的代码在浏览器中显示它。

.controller("formB", function() {
$scope.formb.year = ["2015"+"\/"+"2016", "2016"+"\/"+"2017"];
$scope.formb.semester = [1,2,3];
$scope.formb.pdf ="";

setDefaultsForPdfViewer($scope);
// Initialize the modal view.
$ionicModal.fromTemplateUrl('src/app/components/form_b/pdf-viewer.html', {
    scope: $scope,
    animation: 'slide-in-up'
}).then(function (modal) {
    $scope.modal = modal;
});
$scope.openModal = function() { 
    $scope.modal.show();
    };
$scope.$watchGroup([
'formb.year.selected',
'formb.semester.selected'
],function(newVals, oldVals){

    if(newVals[0]&&newVals[1]&&newVals!==oldVals){
            $ionicLoading.show({
             template:'Loading...'
                 }).then(function(){
             });

    DataFactory.getFormB(newVals[0],newVals[1]).then(function(resp){
           $scope.formb.pdf = resp.data.data; 
    var str  =  resp.data.data;
    currentBlob = myB64ToBlob(str,"application/pdf");

    $ionicLoading.hide().then(function(){
    console.log("No more loading");
        });

     $scope.pdfUrl = window.URL.createObjectURL(currentBlob);

            // Display the modal view

            });
    }

    });

    // Clean up the modal view.
    $scope.$on('$destroy', function () {
    $scope.modal.remove();
    });
    function base64ToUint8Array(base64) {  
    var raw = atob(base64);
    var uint8Array = new Uint8Array(raw.length);
    for (var i = 0; i < raw.length; i++) {
    uint8Array[i] = raw.charCodeAt(i);
    }
    return uint8Array.buffer;
    }  
    function myB64ToBlob( base64,contentType ){
    var arr =  base64ToUint8Array(base64);

    var blob = new Blob([arr], {type: contentType});
    return blob;
    }
    ...
       }

这里重要的是这一行:

$scope.pdfUrl = window.URL.createObjectURL(currentBlob);

它可以在浏览器中运行,但在手机中失败了。我真的很困惑,我似乎无法弄清楚发生了什么。有人可以帮忙吗?

1 个答案:

答案 0 :(得分:1)

尝试JS本机函数来创建URL并将其传递给范围。 Windows无法通话。

  objectURL = URL.createObjectURL(blob);

阅读本文。 https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL

  

对于移动设备,需要使用ng-cordova文件插件。看这里   https://github.com/apache/cordova-plugin-file