Mostrar archivo PDF recibido como flujo de datos

Requisitos:

 

 

 

Parte HTML:

   <! - 条款 -> 
    <div ng-show = "step == 5" style = "background: # f6f5f5; height: 100%; width: 100%;"> 
        <div class = "weui-panel weui- panel_access cpxq-head-color "> 
            <div style =" margin: 10px auto; width: 40%; text-align: center; "> 条款 须知 </div> 
            <! - 太平盛世 颐 享 人生 年金 保险 (2018 ) -> 
            <div> 
                <div style = "height: 44px; line-height: 44px; background-color: # DFF2FF;"> 
                    <div style = "float: left;"> 
                        <img src = "./ img /annuity/huakuai.png "alt =" "style =" width: 6px; "> 
                    </div> 
                    <div style = "margin-left: 5%; color: # 28A5FF;"> Taiping Shengshi Yixiang Life Annuity Insurance (2018) </ div>div style = "margin-left: 5%; color: # 28A5FF;"> Taiping Shengshi Yixiang Life Annuity Insurance (2018) </ div> 
                </ div>
                <div ng-repeat = "obj en el seguimiento de sentencias por $ index"> 
                    <div class = "cpxq-panel__hd"> 
                        <div class = "zdyl-tab-right" style = "margin-left: 0;" ng-click = "changeShowContent ($ index, 0)"> 
                            <i style = "font-size: 16px"> {{obj.label}} </i> 
                            <img ng-show = "! obj.showContent" clase = "cpxq-arrows" src = "./ img / down-grey.png"> 
                            <img ng-show = "obj.showContent" class = "cpxq-arrows" src = "./ img / up-grey.png "> 
                        </div> 
                    </div>
                        <div style = "height: 100%;" ng-if = "showPdfFlagTF">  
                            <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 = "pdfScroll" zooming = "true" direction = "xy" 
                                    style = "ancho: 100%; altura: 100%;" scrollbar-y = "false" scrollbar-x = "false" 
                                    min-zoom = "1"> 
                                    <div id = "pdf-popTF" 
                                        style = "ancho: 100%; altura: 100%; radio del borde: 10px; antecedentes: 
                                <
                        </ div> 
                    </ div> 
                </ div> 
            </ div> 
            <! - Taiping Shengshi Yixiang Life Annuity Insurance (Universal) -> 
            <div style = "clear: both;"> 
                <div style = " height: 44px; line-height: 44px; background-color: # DFF2FF; "> 
                    <div style =" float: left; "> 
                        <img src =" ./ img / annuity / huakuai.png "alt =" "style = "ancho: 6px;"> 
                    </ div> 
                    <div style = "margin-left: 5%; color: # 28A5FF;"> Taiping Shengshi Yixiang Life Anuity Insurance (Universal) </ div> 
                </ div> 
                <div ng-repeat = "obj en declaraciones1 seguimiento por $ index">
                    <div class = "cpxq-panel__hd"> 
                        <div class = "zdyl-tab-right" style = "margin-left: 0;" ng-click = "changeShowContent ($ index, 1)"> 
                            <i style = "font-size: 16px"> {{obj.label}} </i> 
                            <img ng-show = "! obj.showContent" clase = "cpxq-arrows" src = "./ img / down-grey.png"> 
                            <img ng-show = "obj.showContent" class = "cpxq-arrows" src = "./ img / up-grey.png "> 
                        </div> 
                    </div> 
                    <div ng-if =" $ index == 0 && obj.showContent "style =" height: 400px;
                            <div id = "pdf-containerTF" 
                                style = "ancho: 100%; altura: 95%; radio del borde: 10px; cuadro-sombra: 0 0 10px # 3268d2; fondo: #ffffff; relleno: 10px;"> 
                                < ion-scroll delegate-handle = "pdfScroll1" zooming = "true" direction = "xy" 
                                    style = "ancho: 100%; altura: 100%;" scrollbar-y = "false" scrollbar-x = "false" 
                                    min-zoom = "1"> 
                                    <div id = "pdf-popTF" 
                                        style = "ancho: 100%; altura: 100%; radio del borde: 10px; fondo: #ffffff; margen: 0px; posición:
                                </ion-scroll> 
                        </div> 
                    </div> 
                </div> 
            </div> 
        </div> 


    </div>

　　

Métodos de embalaje relacionados:

/ * 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; 

} 



// El objeto definido por el complemento PDF.js, la URL del archivo pdf dado o una matriz Uint8Array , Llame a PDFJS.getDocument () para obtener 

var pdfDoc = null; 

// escala de 

escala var scale = 1; 

// número total de páginas en archivo pdf 

var count = 1; 

/ * pase el valor decodificado a PDFJS.getDocument () , Entregue a 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; 

        // Dibuje todas las páginas 

        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; 

        // Dibuje todas las páginas 

        renderAllTF ();

    }); 

    if (isRead) { 

        $ ('# pdf-containerTF ion-scroll'). css ('height', '90% '); 

        readTime = 5; 

        $ (' # validateRead '). show (); 

        $ ('#validateRead'). text ('He leído (' + readTime + 's' + ')'); 

        var read = function () { 

            readTime--; 

            $ ('# validateRead'). text ('I Leer ('+ readTime +' s '+') '); 

            if (readTime <= 0) { 

                $ (' # validateRead '). Texto (' He leído '). 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) { 

    // Usando promesa para buscar la página 

    pdfDoc.getPage (num) .then (function (page) { 

        var ctx = canvas.getContext ('2d'); 

        var viewport = page.getViewport (scale); 



        canvas.height = viewport.height; 

        canvas.width = viewport.width; 



        // Procesar página PDF en contexto de lienzo

        var renderContext = { 

            canvasContext: ctx, 

            viewport: viewport 

        }; 

        var renderTask = page.render (renderContext); 



        // Espere a que el renderizado termine 

        renderTask.promise.then (function () { 

            // Esto es para dibujar una página a la vez Después de la función de devolución de llamada 

            // console.log ("Página" + num + "prestados"); 

        }); 

    }); 

} 

var initial = null; 



función renderPageTF (num, canvas) { 

    // Uso de la promesa para recuperar la página 

    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 + ')'}); 

        // según 

        Consulta de medios, determine la función de inicio del tamaño de ventana myFunction (x) { 

            if (x.matches) {// Consulta de medios 

                $ ('# pdf-popTF'). Css ({'transform': 'translate (-20%, 0px) scale ('+ initial +') '}); 

            } else { 

                $ (' # pdf-popTF '). css ({' transform ':' translate (0%, 0px) scale ('+ null +') '} );

            } 

        } 

        var x = window.matchMedia ("(ancho máximo: 700px)")

        myFunction (x) // La función de monitor llamada durante la ejecución 

        x.addListener (myFunction) // Agregue un detector cuando el estado cambie 

        // Según la consulta de medios, juzgue el tamaño de la ventana end 

        canvas.height = viewport.height; 

        canvas.width = viewport. ancho; 

        // Renderiza la página PDF en el contexto del lienzo 

        var renderContext = { 

            canvasContext: ctx, 

            viewport: viewport 

        }; 

        var renderTask = page.render (renderContext); 



        // Espera a que el renderizado termine 

        renderTask.promise.then (function () { 

            // Esta es la función de devolución de llamada después de que se dibuja cada página de contenido 

            // console.log ("Página" + num + "prestados"); 

        }); 

    }); 

} 



función renderAll () {

    for (var curPage = 1; curPage <= count; curPage ++) { 

        // Cree un nuevo <canvas> para y dibuje el contenido de la página correspondiente a este lienzo 

        var canvas = document.createElement ("canvas"); 

        var div = document.createElement ("div"); 

        $ (div) .attr ("id", "página" + curPage); 

        $ (div) .attr ("clase", "página"); 

        $ (div) .append (canvas); 

        $ ("# pdf-pop"). append (div); 

        renderPage (curPage, canvas); 

    } 

} 



function renderAllTF () { 

    initial = null; 

    for (var curPage = 1; curPage <= count; curPage ++ ) { 

        // Cree un nuevo <canvas> y dibuje el contenido de la página correspondiente a este lienzo 

        var lienzo = documento.createElement ("lienzo");

        var div = document.createElement ("div"); 

        $ (div) .attr ("id", "página" + curPage); 

        $ (div) .attr ("clase", "página"); 

        $ (div) .append (lienzo); 

        $ ("# pdf-popTF"). append (div); 

        renderPageTF (curPage, canvas); 

    } 

}

　

Parte JS:

   // Mostrar términos 
        $ scope.statements = [{ 
            label: 'Ver términos', 
            showContent: false 
        }]; 
        $ scope.statements1 = [{ 
            label: 'Ver términos', 
            showContent: false 
        }]; 



        // Mostrar pdf 
        $ scope .showPdfFlagTF = false; 
        $ scope.showPdfFlagTF1 = false; 
        $ scope.contain = ['', '']; 
        $ scope.openPdfDialog = function (ruta, tipo) { 
            $ ionicLoading.show ({}); 
            zytHttp.post ( "ZYT_TB_027", {urlPath: ruta}, función (datos) { 
                if (data.item.file) { 
                    if (type == 0) {
                        $ scope.contain [0] = data.item.file; 
                        console.log ($ scope.contain [0]); 
                    } else { 
                        $ scope.contain [1] = data.item.file; 
                        console.log ($ scope.contain [1]); 
                    } 

                    if (type == 0) { 
                        $ scope.showPdfFlagTF = true; 
                    } else { 
                        $ scope.showPdfFlagTF1 = verdadero; 
                    } 
                    showPdfFileTF (data.item.file); 
                    $ ionicLoading.hide (); 
                    $ scope. $ apply (); 

                } más {
                    $ ionicLoading.hide ({});
                    alerta ({tipo: 'error', título: '错误', mensaje: data.error.msg, pie: '返回 重 试'}); 
                } 
            }, función (datos) { 
                $ ionicLoading.hide ({}); 
            }) 
        }; 
        $ scope.showDetail = function (type) { 
            var path = ''; 
            if (type == 0) { 
                ruta = '/share/file/static/TPYX2018.pdf'; 
                if ($ scope.contain [0]) { 
                    showPdfFileTF ($ scope.contain [0]); 
                } else { 
                    $ scope.openPdfDialog (ruta, tipo) 
                } 
                ruta = '/share/file/static/TPYX2018WN.pdf';
                // 条款
                if ($ scope.contain [1]) { 
                    showPdfFileTF ($ scope.contain [1]); 
                } else { 
                    $ scope.openPdfDialog (ruta, tipo) 
                } 
            } 

        } 

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