文章/答案/技术大牛

发布

社区首页 >问答首页 >Turnjs在同一个文件中使用pdfjs显示tcpdf输出为flipbook。

问Turnjs在同一个文件中使用pdfjs显示tcpdf输出为flipbook。
EN

Stack Overflow用户

提问于 2020-01-02 02:53:34

回答 1查看 1.3K关注 0票数 0

我希望在同一个文件中使用pdfjs将tcpdf输出显示为flipbook。

方法1:只使用Turnjs (就像我们对blob映像所做的那样)-not成功的

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

<?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>
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<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>

方法2:使用pdfjs和pdfjs库的pdfjs转换器。-成功的

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

如果可能的话，我希望在同一个文件中将turnjs和pdfjs组合起来。在创建tcpdf输出之后，turnjs和pdfjs使用相同文件中的blob输出来显示为flipbook。

提前谢谢。

pdf

blob

pdf.js

turnjs

bloburls

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-01-15 04:58:22

这就是解决办法！

将$pdf->Output('', 'E')输出到变量$base64PdfString的

保存64位格式。only base64 parts(value of index 5 onwards from the array).
Convert base64 to blob
爆发$base64PdfString数组，并在javascript中获取atob(b64Data)、new Uint8Array(byteNumbers)和new Blob(byteArrays, {type: contentType}).
Create blobUrl中的first page.
Create turnjs instance.page: 1，使用URL.createObjectURL(blob).
Hardcode on作为first page.
Createturnjs instance.page: 1引用加载页面。因此，在将页面添加到turnjs之前，无法定义这一点。

$("#book").turn({ page: 1，autoCenter: true，})；

创建.turn，并使用pdf_doc.numPages.

Add all pages to turnjs在PDFJS.getDocument({ url: blobUrl }).then(function(pdf_doc){})中添加从2页到最后一页的页面开始。

( a)通过pdf_doc.getPage((page-1)).then(function(p){})从pdf blob中获取页面。

b)创建html元素，画布。创建renderContext(RenderContext encapsulates the information needed to produce a specific rendering from a RenderableImage)并向键canvasContext of renderContext添加画布的页面1.getContext(‘2d’)。然后，用p.render(renderContext).then(function(){}).在上面呈现pdf页面。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59557851

复制

相似问题

问Turnjs在同一个文件中使用pdfjs显示tcpdf输出为flipbook。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Turnjs在同一个文件中使用pdfjs显示tcpdf输出为flipbook。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Turnjs在同一个文件中使用pdfjs显示tcpdf输出为flipbook。
EN