在网站中初始化 PDF.js

Question

我正在尝试将 PDF.js 整合到我的网站中，但无法正确完成。

屏幕显示如下：

我在屏幕上看不到 PDF 文件，但是当我按 Print 时，打印菜单确实显示了其中的 PDF 文件。其他功能运行良好。

这是我的代码：

[[HTML HERE downloaded from source of PDF.JS]]

<!-- This snippet is used in production (included from viewer.html) -->
<link rel="resource" type="application/l10n" href="<?php echo JS_LIB_FOLDER; ?>pdfjs/web/locale/locale.properties"/>

<?php
echo $this->Html->css(JS_LIB_FOLDER . 'pdfjs/web/viewer.css');

echo $this->Html->script(JS_LIB_FOLDER . 'pdfjs/web/compatibility.js');
echo $this->Html->script(JS_LIB_FOLDER . 'pdfjs/web/l10n.js');
echo $this->Html->script(JS_LIB_FOLDER . 'pdfjs/build/pdf.js');
echo $this->Html->script(JS_LIB_FOLDER . 'pdfjs/web/debugger.js');
echo $this->Html->script(JS_LIB_FOLDER . 'pdfjs/web/viewer.js');
?>

<script type="text/javascript">
    'use strict';
    PDFJS.imageResourcesPath = site_url+'js/library/pdfjs/web/images/';
    PDFJS.workerSrc = site_url+'js/library/pdfjs/build/pdf.worker.js';
    PDFJS.cMapUrl = site_url+'js/library/pdfjs/web/cmaps/';

</script>

我用谷歌搜索了这个问题，但没有找到任何关于如何成功集成这个库的信息。任何一分钱的帮助将不胜感激。

P.S. javascript 控制台没有错误。

Answer 1

如果在您的布局中（例如 /app/View/Layouts/default.ctp），您的内容块将包裹在 div 中：

<div id="container">
    <div id="content">
        <?php echo $this->fetch('content'); ?>
    </div>
</div>

PDFJS canvas 将被隐藏，您将无法查看 PDF。

如果您在 Firebug 中检查 <div id="outerContainer"> 的计算布局，这就是您得到的结果：

宽度为 1212 像素，但高度为 0 像素。

您可以删除布局中包裹内容块的 div，也可以为 div 指定高度。例如：

<div id="outerContainer" style="height:400px">

在网站中初始化 PDF.js

Initialize PDF.js in website

javascript

html

pdf

cakephp-2.5

pdf.js