как мы можем отобразить PDF из строки 64 base в Cordova.inappbrowser в Android - PullRequest
Новая
       65

как мы можем отобразить PDF из строки 64 base в Cordova.inappbrowser в Android

0 голосов
/ 26 сентября 2018

Мое требование - отображать строку pdf base64 в cordova.InAppBrowser она не отображается в Android

Но она отображается в приложении iOS.Я использую приведенный ниже код для отображения PDF в InAppBrowser 

$scope.urlString = "data:application/pdf;base64,"+encodeURI($scope.PdfString);
var ref = cordova.InAppBrowser.open($scope.urlString, '_blank',  'toolbarposition=bottom');

Кто-нибудь знает, как я могу отобразить строку PDF base64 в Cordova InAppBrowser?или есть какой-нибудь альтернативный способ отображения.

Ответы [ 4 ]

0 голосов
/ 18 апреля 2019

В моем случае ответ Byka работал только для Android.Я отредактировал его, и теперь он работает как прелести и в iOS.Мое приложение загружает файл PDF в кодировке base64, конвертирует и открывает его.

Проблема была в том, что файл открыли в iOS, решено добавить плагин file opener2 

function b64toBlob(b64Data, contentType, sliceSize) {
    contentType = contentType || '';
    sliceSize = sliceSize || 512;
    var byteCharacters = atob(b64Data);
    var byteArrays = [];
    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        var slice = byteCharacters.slice(offset, offset + sliceSize);
        var byteNumbers = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }
        var byteArray = new Uint8Array(byteNumbers);
        byteArrays.push(byteArray);
    }
    var blob = new Blob(byteArrays, { type: contentType });
    return blob;
}

function savebase64AsPDF(folderpath, filename, content, contentType) {
    // Convert the base64 string in a Blob
    var DataBlob = b64toBlob(content, contentType);
    window.resolveLocalFileSystemURL(folderpath, function (dir) {
        dir.getFile(filename, { create: true }, function (file) {
            file.createWriter(function (fileWriter) {
                fileWriter.write(DataBlob);
                var finalPath = folderpath + filename;
                //window.open(finalPath, '_system');
                cordova.plugins.fileOpener2.open(finalPath, 'application/pdf'
                    //,
                    //{
                    //    error: function (e) {
                    //        alert('Error status: ' + e.status + ' - Error message: ' + e.message);
                    //    },
                    //    success: function () {
                    //        alert('file opened successfully');
                    //    }
                    //}
            );

            }, function () {
                alert("err");
        });
    });
}

function PrintFile(id) {
            jQuery("#large-indicator").css("display", "inline");
            $.ajax({
                type: "POST",
                contentType: "application/json",
                dataType: "json",
                url: "myurl",
                data: JSON.stringify({
                    "id": id
                }),
                success: function (Response) {
                    jQuery("#large-indicator").css("display", "none");
                    var contentType = "application/pdf";
                    var folderpath = cordova.file.externalRootDirectory;
                    if (folderpath == null)
                        folderpath = cordova.file.dataDirectory
                    var filename = id + ".pdf";
                    savebase64AsPDF(folderpath, filename, Response.value, contentType);
                },
                error: function (Response) {
                    jQuery("#large-indicator").css("display", "none");
                    var mex = Response["responseText"];
                    alert(mex);
                }
            });
}
0 голосов
/ 27 сентября 2018

Наконец-то пришло решение. В нашем проекте должен быть плагин cordova-file-plugin

плагин cordova add cordova-plugin-file 

var myBase64 = "JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwogIC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAvTWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0KPj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAgL1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9udAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2JqCgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJUCjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVuZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4gCjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAwMDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9vdCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G";
// To define the type of the Blob
var contentType = "application/pdf";
// if cordova.file is not available use instead :
// var folderpath = "file:///storage/emulated/0/";
var folderpath = cordova.file.externalRootDirectory;
    var filename = "helloWorld.pdf";

    savebase64AsPDF(folderpath,filename,$scope.PdfString,contentType);

function b64toBlob(b64Data, contentType, sliceSize) {
        contentType = contentType || '';
        sliceSize = sliceSize || 512;
        var byteCharacters = atob(b64Data);
        var byteArrays = [];
        for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
            var slice = byteCharacters.slice(offset, offset + sliceSize);
            var byteNumbers = new Array(slice.length);
            for (var i = 0; i < slice.length; i++) {
                byteNumbers[i] = slice.charCodeAt(i);
            }
            var byteArray = new Uint8Array(byteNumbers);
            byteArrays.push(byteArray);
        }
      var blob = new Blob(byteArrays, {type: contentType});
      return blob;
}
    function savebase64AsPDF(folderpath,filename,content,contentType){
        // Convert the base64 string in a Blob
        var DataBlob = b64toBlob(content,contentType);

        console.log("Starting to write the file :3");

        window.resolveLocalFileSystemURL(folderpath, function(dir) {
            console.log("Access to the directory granted succesfully");
    		dir.getFile(filename, {create:true}, function(file) {
                console.log("File created succesfully.");
                file.createWriter(function(fileWriter) {
                    console.log("Writing content to file");
                    fileWriter.write(DataBlob);
                    console.log("Folder Path"+folderpath+filename);
                    var finalPath = folderpath+filename;
                     window.open(finalPath, '_system');

                }, function(){
                    alert('Unable to save file in path '+ folderpath);
                });
    		});
        });
    }
0 голосов
/ 12 января 2019

просто чтобы дополнить решение @Byka, мы должны установить его в ionic 3

  1. ionic cordova плагин добавить файл cordova-plugin-file
  2. npm установить --save @ ionic-native / file
  3. плагин ionic cordova добавить cordova-plugin-file-opener2
  4. npm установить --save @ ionic-native / file-opener

Важно дляПо какой-то причине writeFile из файла не работает, поэтому отредактируйте ваш index.html

, который вы должны включить до того, как ваш cordova.js 

      <script src="build/polyfills.js"></script>

добавит плагины в модуль вашего приложения

import {File} из '@ ionic-native / file' import {FileOpener} из '@ ionic-native / file-opener'

также добавлен в поставщики

поставщики: [..... File, FileOpener] 

import { Component } from '@angular/core'
import { NavController, NavParams, Platform } from 'ionic-angular'
import { InAppBrowser } from '@ionic-native/in-app-browser'
import { File } from '@ionic-native/file'
import { FileOpener } from '@ionic-native/file-opener'

@Component({
  selector: 'page-pantalla-mi-promenal-consultas',
  templateUrl: 'pantalla-mi-promenal-consultas.html'
})
export class YourPage {
 

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private platform: Platform,
    private file: File,
    private fileOpener: FileOpener
  ) {}

  getUserDataSheet() {
          const blob = this.b64toBlob(pdfString, 'application/pdf', 512)
          let pathFile = ''
          const fileName = 'myPdf.pdf'
          const contentFile = blob
          if (this.platform.is('ios')) {
            pathFile = this.file.documentsDirectory
          } else {
            pathFile = this.file.externalRootDirectory
          }
          this.file
            .writeFile(pathFile, fileName, contentFile, { replace: true })
            .then(success => {
              this.fileOpener
                .open(pathFile + fileName, 'application/pdf')
                .then(data => {
                  this.inAppBrowser.create(data, '_system')
                })
                .catch(e => console.log('Error opening file', e))
            })
            .catch(e => console.log('Error writing file', e))
        }
  }

  b64toBlob(b64Data, contentType, sliceSize = 512) {
    contentType = contentType || ''
    sliceSize = sliceSize || 512
    b64Data = b64Data.replace(/^[^,]+,/, '')
    b64Data = b64Data.replace(/\s/g, '')

    var byteCharacters = atob(b64Data)
    var byteArrays = []

    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
      var slice = byteCharacters.slice(offset, offset + sliceSize)

      var byteNumbers = new Array(slice.length)
      for (var i = 0; i < slice.length; i++) {
        byteNumbers[i] = slice.charCodeAt(i)
      }

      var byteArray = new Uint8Array(byteNumbers)

      byteArrays.push(byteArray)
    }

    var blob = new Blob(byteArrays, {
      type: contentType
    })
    // return byteCharacters;
    return blob
  }
}
0 голосов
/ 26 сентября 2018

Вот как я достиг для Android и IOS. Cheers !!

Используйте эти плагины 

<plugin name="cordova-plugin-inappbrowser" />
<plugin name="cordova-plugin-file"/>
<plugin name="cordova-plugin-file-transfer"/>
<plugin spec="https://github.com/tectronik/cordova-plugin-file-opener2-tectronik.git"/>

Рабочий код для вас. 

    var blob = b64toBlob("base64 string here", 'application/pdf');
    var pathFile = "";
    var fileName ='PdfName.pdf';
    var contentFile = blob;
    if (ionic.Platform.isIOS()) {
        var pathFile = cordova.file.documentsDirectory
    } else {
        var pathFile = cordova.file.externalRootDirectory
    }

    $cordovaFile.writeFile(pathFile, fileName, contentFile, true)
        .then(function(success) {
            $scope.filePath=pathFile + fileName;
            // console.log("File saved on internal storage location," + pathFile + fileName);

        if (ionic.Platform.isAndroid()) {
            $cordovaFileOpener2.open($scope.filePath,
                'application/pdf'
                ).then(function() {
                    // file opened successfully
                    // alert(' file opened successfully')
                }, function(err) {
                    alert('An error occurred '+err);
                });
        }else{
            var ref = cordova.InAppBrowser.open(data, '_blank', 
    'location=no,toolbar=yes');
        }    
}, function(error) {

}); 
function b64toBlob(b64Data, contentType, sliceSize) {
        contentType = contentType || '';
        sliceSize = sliceSize || 512;

        b64Data = b64Data.replace(/^[^,]+,/, '');
        b64Data = b64Data.replace(/\s/g, '');

        var byteCharacters = atob(b64Data);
        var byteArrays = [];

        for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
            var slice = byteCharacters.slice(offset, offset + sliceSize);

            var byteNumbers = new Array(slice.length);
            for (var i = 0; i < slice.length; i++) {
                byteNumbers[i] = slice.charCodeAt(i);
            }

            var byteArray = new Uint8Array(byteNumbers);

            byteArrays.push(byteArray);
        }

        var blob = new Blob(byteArrays, {
            type: contentType
        });
        // return byteCharacters;
        return blob;
    }
...