javascript - Django-JS : How to display the first PDF page as cover

Question

我想改进我的脚本，以便当用户在模板上的对象上设置移动时为每个对象设置 PDF 封面。

实际流程:

到目前为止，我可以根据带有一些附加字段的对象上传.pdf和.epub文件格式:title，语言 ...

PDF 存储在我项目的 media 目录中。

在主页中，我显示所有对象，如下所示:

正如您在每个出版物的末尾看到的那样，有一个字形，到目前为止，它可以在另一个选项卡中显示对象 PDF 文件。

预期想法:

我想知道是否有办法显示 PDF 文件的窗口。更好的做法是仅显示第一个 PDF 页面，以便为每个对象定义封面页。

在我的 HTML 文件中，我有这一行可以将我的 PDF 显示到另一个选项卡中:

<td class="col-md-1"><a id="download-image_{{ document.id }}" href="http://localhost:8000/media/{{ document.upload }}"><span class="glyphicon glyphicon-blackboard"></span></a></td>

我假设我需要处理这一行并从 pdf.js 添加 javascript，以便仅获取第一页并将其显示为图片。

我阅读了 PDF.js 文档，并且希望获得一些帮助来显示我的第一个 PDF 页面。 PDF.js 中的文档和示例多种多样，但我不知道如何做到这一点。

编辑:

感谢 Kedas mendi，这就是我根据他的回答得到的。但我无法克服显示我的 pdf。

在我的 html 文件中，我有一个表格:

<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
<script src="../static/freepub/js/customPdf.js"></script>

<table>
    <td class="col-md-1">
        <canvas class="the-canvas"><a href="http://localhost:8000/media/{{ document.upload }}"><span class="glyphicon glyphicon-blackboard"></span></a></canvas>
    </td>
</table>

还有我的 customPdf.js 文件:

pdfjsLib.getDocument('http://localhost:8000/media/media/loremipsum.pdf').then(function(pdf) {
  pdf.getPage(1).then(function(page) {
    var scale = 1.5;
    var viewport = page.getViewport(scale);

    var canvas = document.getElementById('the-canvas');
    var context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    var renderContext = {
      canvasContext: context,
      viewport: viewport
    };
});
  page.render(renderContext);
});

到目前为止，getDocument() 指向一个特定的 pdf 文件，但最后它将是一个 django 变量。

无论如何，我不显示任何 PDF 文件

Answer 1

好吧，您可以按照评论中提到的方式执行以下操作:

Pdf.js 那么，

• 为要显示的页面创建模板 html

• 在 html 代码中添加以下行:

 <script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
<script src="customPdf.js">

• 创建一个 Canvas 来渲染您的 pdf 文件:

<canvas id="the-canvas"></canvas>

• 创建一个名为“customPdf.js”的新文件并添加接下来的内容
• 用它来加载 pdf 对象

pdfjsLib.getDocument('/media/{{ document.upload }}').then(function(pdf) {
  // you can now use *pdf* here
});

• 您还可以调整设置，以您想要的样式显示它:

var scale = 1.5;
var viewport = page.getViewport(scale);

var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;

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

• 终于可以渲染页面了

page.render(renderContext);

基本上，这就是您想要渲染第一页的方法，但请参阅documentation了解更多详情。