我想在同一文件中使用 pdfjs 将 tcpdf 输出显示为翻书。
方法1：仅使用Turnjs（像我们对blob图像一样尝试）-不成功
首先，我base64从$pdf->Output('', 'E');. 然后，我转换为blob并创建url. 我创建的 pdf 文件包含两页。我无法在 turnjs 中预览。之后，我使用 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：使用带有turnjs和pdfjs库的PDF翻书转换器。-成功
我把它url (php file output pdf to browser using tcpdf) as default url放在 viewer.js 中。该方法可以成功运行。
如果可能的话，我想将 turnjs 与 pdfjs 结合在同一个文件中。创建 tcpdf 输出后，turnjs 和 pdfjs 使用同一文件中的该 blob 输出显示为翻书。
预先感谢。