Question

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

实际过程：

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

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

在主页上，我显示所有这样的对象：

正如您在每个出版物的末尾看到的那样，有一个glyphicon，到目前为止，它可以在另一个选项卡中显示对象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">

创建一个可渲染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了解更多详情。

Answer 2

好的，所以我不得不为此添加另一个答案。

我的项目工作树：

└───stack
│   db.sqlite3
│   manage.py
│
├───.dist
├───main
│   │   admin.py
│   │   apps.py
│   │   models.py
│   │   pdf.pdf
│   │   tests.py
│   │   urls.py
│   │   views.py
│   │   __init__.py
│   │
│   ├───migrations
│   │   │   __init__.py
│   │   │
│   │   └───__pycache__
│   │           __init__.cpython-36.pyc
│   │
│   ├───static
│   │   └───main
│   │           main.js
│   │           pdf.pdf
│   │
│   ├───templates
│   │   └───voyage
│   │           home.html
│   │
│   └───__pycache__
│           admin.cpython-36.pyc
│           models.cpython-36.pyc
│           urls.cpython-36.pyc
│           views.cpython-36.pyc
│           __init__.cpython-36.pyc
│
└───stack
    │   settings.py
    │   urls.py
    │   wsgi.py
    │   __init__.py

我创建了一个新项目，这对我来说效果很好，请按照我的步骤操作：

在您的settings.py中，添加您的应用名称 INSTALLED_APPS 。
完整的HTML代码：

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Page Title</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" media="screen" href="main.css" />

</head>

<body>
	<h1>test</h1>
	<canvas id="the-canvas"></canvas>
</body>

<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
<script src="static/main/main.js"></script>

</html>

在项目中，您应该创建一个名为static的文件夹，在其中创建一个带有应用程序名称的文件夹，在其中可以放置静态文件，即：css / js
在我的static / main文件中，我添加了一个名为pdf和main.js的pdf文件
在我的main.js中，我添加了以下代码以呈现pdf.pdf的第一页

pdfjsLib.getDocument('/static/main/pdf.pdf').then(function (pdf) {
    console.log("pdf loaded");
    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);
    });
});

注意，我使用了非常简单的python / django编码风格，这只是出于提高速度的目的，因此您可能会更改我所做的操作，而且静态文件也无法正确提供，因此如果您要部署自己的像Apache或Nginx这样的服务器上的应用，see。

Django-JS：如何显示第一个PDF页面作为封面

2 个答案: