javascript - 在网站中初始化 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>

我已经广泛搜索了这个问题，但没有发现如何成功集成这个库。任何一分钱的帮助将不胜感激。

PS javascript 控制台中没有错误。

Answer 1

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

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

PDFJS 画布将被隐藏，您将无法可视化 PDF。

如果您检查<div id="outerContainer">Firebug 中的计算布局，您会得到以下结果：

那是 1212 像素宽，但 0 像素高。

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

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