Turnjs 在同一文件中使用 pdfjs 将 tcpdf 输出显示为动画书

Question

我想在同一文件中使用 pdfjs 将 tcpdf 输出显示为动画书。

方法一：仅使用Turnjs（像我们对blob图像一样尝试）-不成功[=32=]

首先，我从 $pdf->Output('', 'E'); 得到 base64。然后，我转换为 blob 并创建 url。我创建的 pdf 文件包含两页。我无法在 turnjs 中预览。之后，我将 url 传递给 div 内的 div 和 id(flipbook)。但是，flipbook中没有显示任何内容。

<?php ob_start(); require_once('plugin/tcpdf/tcpdf.php'); $pdf =new TCPDF(); $pdf->setPrintHeader(false); $pdf->setPrintFooter(false); $pdf->AddPage(); $html_p1='Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or other type of compatible computer. Text messages may be sent over a cellular network, or may also be sent via an Internet connection.'; //echo $html; $pdf->writeHTML($html_p1, true, 0, true, 0); $pdf->AddPage(); $html_p2='A telephone call is a connection over a telephone network between the called party and the calling party.'; $pdf->writeHTML($html_p2, true, 0, true, 0); $base64PdfString = $pdf->Output('', 'E'); $base64PdfArray = explode("\r\n", $base64PdfString); $base64 = ''; for($i = 5; $i < count($base64PdfArray); $i++) { $base64 .= $base64PdfArray[$i]; } ?> <!doctype html>      <html lang="en">  <head> <meta name="viewport" content="width = 1050, user-scalable = no" /> <script type="text/javascript" src="plugin/turnjs4/extras/jquery.min.1.7.js"></script> <script type="text/javascript" src="plugin/turnjs4/extras/modernizr.2.5.3.min.js"></script> <script> const b64toBlob = (b64Data, contentType='', sliceSize=512) => { const byteCharacters = atob(b64Data); const byteArrays = []; for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) { const slice = byteCharacters.slice(offset, offset + sliceSize); const byteNumbers = new Array(slice.length); for (let i = 0; i < slice.length; i++) { byteNumbers[i] = slice.charCodeAt(i); } const byteArray = new Uint8Array(byteNumbers); byteArrays.push(byteArray); } const blob = new Blob(byteArrays, {type: contentType}); return blob; } $( document ).ready(function() { const contentType ='application/pdf'; const b64Data ='<?php echo $base64;?>'; const blob =b64toBlob(b64Data, contentType); const blobUrl =URL.createObjectURL(blob); var div_container = document.querySelector('#flipbook'); var element = document.createElement("div"); element.style.backgroundImage = "url(" + blobUrl + ")"; div_container.appendChild(element); }) </script> </head> <body> <div class="flipbook-viewport"> <div class="container"> <div class="flipbook" id="flipbook"> </div> </div> </div> <script type="text/javascript"> function loadApp() { // Create the flipbook $('.flipbook').turn({ // Width width:922, // Height height:600, // Elevation elevation: 50, // Enable gradients gradients: true, // Auto center this flipbook autoCenter: true }); } // Load the HTML4 version if there's not CSS transform yepnope({ test : Modernizr.csstransforms, yep: ['plugin/turnjs4/lib/turn.js'], nope: ['plugin/turnjs4/lib/turn.html4.min.js'], both: ['plugin/turnjs4/samples/basic/css/basic.css'], complete: loadApp }); </script> </body> </html>

方法二：使用带有turnjs和pdfjs库的pdf flipbook转换器。-成功

我把 url (php file output pdf to browser using tcpdf) as default url 放在了 viewer.js 中。此方法可以运行成功。

如果可能，我想将 turnjs 和 pdfjs 合并到同一个文件中。创建 tcpdf 输出后，turnjs 和 pdfjs 在同一文件中使用该 blob 输出显示为动画书。

提前致谢。

Answer 1

解决方法在这里！

将 64 位格式的 tcpdf 输出 $pdf->Output('', 'E') 保存到变量 $base64PdfString。
将$base64PdfString分解成数组得到only base64 parts(value of index 5 onwards from the array).
通过 atob(b64Data)、new Uint8Array(byteNumbers) 和 new Blob(byteArrays, {type: contentType}).[=61= 在 javascript 中转换 base64 to blob ]
使用 URL.createObjectURL(blob).

blobUrl

硬编码封面 div 为 first page.

创建 turnjs instance.page: 1 参考加载页面。所以，在将页面添加到 turnjs 之前无法定义它。

        $("#book").turn({
            page: 1,
            autoCenter: true,                   
        });

创建 list array 并使用 pdf_doc.numPages.
添加从 2 开始的页面到 pdf 文件的最后一页

Add all pages to turnjs 里面 PDFJS.getDocument({ url: blobUrl }).then(function(pdf_doc){})。

a) 通过 pdf_doc.getPage((page-1)).then(function(p){}).

从 pdf blob 获取页面

b) 创建 html 元素，canvas。创建 renderContext(RenderContext encapsulates the information needed to produce a specific rendering from a RenderableImage) 并将 canvas 的 pag1.getContext('2d') 添加到 key，renderContext 的 canvasContext。然后，通过 p.render(renderContext).then(function(){}).

渲染 pdf 页面

<?php
ob_start();
require_once('plugin/tcpdf/tcpdf.php');
$pdf = new TCPDF();
$pdf->setPrintHeader(false);
$pdf->setPrintFooter(false);
$pdf->AddPage();
$html_p1 = 'Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or other type of compatible computer. Text messages may be sent over a cellular network, or may also be sent via an Internet connection';
//echo $html;
$pdf->writeHTML($html_p1, true, 0, true, 0);
$pdf->AddPage();
$html_p2 = 'A telephone call is a connection over a telephone network between the called party and the calling party.';
$pdf->writeHTML($html_p2, true, 0, true, 0);
$base64PdfString = $pdf->Output('', 'E');
$base64PdfArray  = explode("\r\n", $base64PdfString);
$base64          = '';
for($i = 5; $i < count($base64PdfArray); $i++){
    $base64 .= $base64PdfArray[$i];
}
?>

<!doctype html>
<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">
        </script>
        <script type="text/javascript" src="plugin/turnjs4/lib/turn.min.js">
        </script>
        <script type="text/javascript" src="plugin/pdfjs_ex/pdf.js">
        </script>
        <script>
            const b64toBlob = (b64Data, contentType='', sliceSize=512) =>
            {
                const byteCharacters = atob(b64Data);
                const byteArrays = [];

                for (let offset = 0; offset < byteCharacters.length; offset += sliceSize)
                {
                    const slice = byteCharacters.slice(offset, offset + sliceSize);
                    const byteNumbers = new Array(slice.length);
                    for (let i = 0; i < slice.length; i++)
                    {
                        byteNumbers[i] = slice.charCodeAt(i);
                    }
                    const byteArray = new Uint8Array(byteNumbers);
                    byteArrays.push(byteArray);
                }

                const blob = new Blob(byteArrays, {type: contentType});
                return blob;
            }
                        function addPage(page, book, pdf_doc)
            {
                if (!book.turn('hasPage', page))
                {
                    var element = $('<div />', {'class': 'page '+((page%2==0) ? 'odd' : 'even'), 'id': 'page-'+page}).html('<i class="loader"></i>');
                    book.turn('addPage', element, page);                                        
                    pdf_doc.getPage((page-1)).then(function(p)
                                    {
                                        var scale = 1;
                                        var viewport = p.getViewport(scale);

                                        var pag1        =document.createElement('canvas');
                                        pag1.id         ='Pg_1';
                                        var context1    =pag1.getContext('2d');
                                        pag1.height     =viewport.height;
                                        pag1.width      =viewport.width;

                                        var renderContext =
                                        {
                                            canvasContext: context1,
                                            viewport: viewport
                                        };

                                        p.render(renderContext).then(function()
                                            {
                                                pag1.toBlob(function(blob)
                                                {
                                                    var burl                        =URL.createObjectURL(blob); 

                                                setTimeout(function()
                                                    {
                                                        element.html('<div style="background-image:url('+burl+'); width: 400px; height: 500px; background-size: cover;"></div><div style="top: 0px; left: 0px; overflow: hidden; z-index: 1; width: 461px; height: 600px;"></div>');

                                                    }, 1000);
                                                })
                                            })
                                    })



                }
            }
        </script>
        <style type="text/css">
            body
            {
                background: #ccc;
            }
            #book
            {
                width: 800px;
                height: 500px;
            }

            #book .turn-page
            {
                background-color: white;
            }

            #book .cover
            {
                background: #333;
            }

            #book .cover h1
            {
                color: white;
                text-align: center;
                font-size: 50px;
                line-height: 500px;
                margin: 0px;
            }

            #book .loader
            {
                background-image: url(loader.gif);
                width: 24px;
                height: 24px;
                display: block;
                position: absolute;
                top: 238px;
                left: 188px;
            }

            #book .data
            {
                text-align: center;
                font-size: 40px;
                color: #999;
                line-height: 500px;
            }

            #controls
            {
                width: 800px;
                text-align: center;
                margin: 20px 0px;
                font: 30px arial;
            }

            #controls input, #controls label
            {
                font: 30px arial;
            }

            #book .odd
            {
                background-image: -webkit-linear-gradient(left, #FFF 95%, #ddd 100%);
                background-image: -moz-linear-gradient(left, #FFF 95%, #ddd 100%);
                background-image: -o-linear-gradient(left, #FFF 95%, #ddd 100%);
                background-image: -ms-linear-gradient(left, #FFF 95%, #ddd 100%);
            }

            #book .even
            {
                background-image: -webkit-linear-gradient(right, #FFF 95%, #ddd 100%);
                background-image: -moz-linear-gradient(right, #FFF 95%, #ddd 100%);
                background-image: -o-linear-gradient(right, #FFF 95%, #ddd 100%);
                background-image: -ms-linear-gradient(right, #FFF 95%, #ddd 100%);
            }
        </style>
    </head>
    <body>

        <div id="book">
                <div class="cover">
                <h1>
                    Cover
                </h1>
            </div>
        </div>

        <!--<div id="controls">
            <label for="page-number">
                Page:
            </label> <input type="text" size="3" id="page-number"> of
            <span id="number-pages">
            </span>
        </div>-->

        <script type="text/javascript">



            $(window).ready(function()
                {

                    const contentType   ='application/pdf';
                    const b64Data       ='<?php echo $base64;?>';
                    const blob          =b64toBlob(b64Data, contentType);

                    const blobUrl       =URL.createObjectURL(blob);

                    PDFJS.getDocument({ url: blobUrl }).then(function(pdf_doc)
                    {
                        __PDF_DOC       = pdf_doc;
                        __TOTAL_PAGES   = __PDF_DOC.numPages;

                        $("#book").turn({
                                        page: 1,
                                       /* width: 400,
                                        height: 300,*/
                                        autoCenter: true,

                                    }); 
                                    //addPage(2, $("#book"),pdf_doc);
                        var list = [];
                        for (var i = 1; i <= __TOTAL_PAGES; i++) 
                        {
                            list.push(i+1);
                        }
                        for (page = 0; page<list.length; page++)
                        addPage(list[page], $("#book"),pdf_doc);
                    })  
                });

            $(window).bind('keydown', function(e)
                {
                    if (e.target && e.target.tagName.toLowerCase()!='input')
                    if (e.keyCode==37)
                    $('#book').turn('previous');
                    else if (e.keyCode==39)
                    $('#book').turn('next');

                });

        </script>


    </body>
</html>

Turnjs 在同一文件中使用 pdfjs 将 tcpdf 输出显示为动画书

Turnjs display tcpdf output as flipbook using pdfjs in same file

pdf

blob

turnjs

pdf.js

bloburls