Django-JS:如何显示第一个PDF页面作为封面 [英] Django - JS : How to display the first PDF page as cover

问题描述

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

I would like to improve my script in order to set PDF cover page for each object when user sets the mouve over the object on the template.

实际过程:

Actual process:

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

Up to now, I can upload .pdf and .epub file formats according to an object with some additionnals fields : title, language ...

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

The PDF is stored into media directory in my project.

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

In the main page, I display all objects like this :

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

As you can see in the end of each publication, there is a glyphicon which let, up to now, to display inside another tab the object PDF file.

预期想法:

Expected idea:

我想知道是否有一种方法可以显示带有PDF文件的窗口.更好的办法是只显示第一个PDF页面，以便为每个对象定义封面.

I would like to know if there is a way to display a window with the PDF file. The better thing will be to display only the first PDF page in order to define a cover page for each object.

在我的HTML文件中，有这行代码，可将PDF显示到另一个标签中:

In my HTML file, I have this line which let to display my PDF into another tab :

<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，以便仅获取第一页并将其显示为图片.

I assume I need to handle this line and add javascript from pdf.js in order to get only the first page and display it as a picture.

我阅读了PDF.js文档，并希望获得一些帮助以显示我的第一个PDF页面.PDF.js的文档和示例很杂，但我找不到如何做到的.

I read the PDF.js documentation and I would like to get some help in order to display my first PDF page. Documentation and examples from PDF.js are miscellaneous but I don't find how I can do that.

Edit :

感谢Kedas mendi，根据他的回答，这就是我所拥有的.但是我没有克服显示我的pdf的问题.

Thanks to Kedas mendi, this is what I have according to his answer. But I don't overcome to display my pdf.

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

In my html file I have a table with :

<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文件:

And my customPdf.js file :

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变量.

Up to now, getDocument() is pointing to a specific pdf file, but it will be a django variable at the end.

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

Anyway, I don"t display any PDF file

推荐答案

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

Alright so i had to add another answer for this.

我的项目工作树:

└───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

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

I created a new project and this worked well for me, follow my steps:

• 在您的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这样的服务器上的应用程序，请请参见.

BEWARE i used very simplistic python/django coding style it's meant just for speed purpose so you may change what i've done also the static files are not served correctly so if you want to deploy your app on a server like Apache or Nginx, see for it.

这篇关于Django-JS:如何显示第一个PDF页面作为封面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！