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

【问题标题】：Django - JS : How to display the first PDF page as coverDjango - JS：如何将第一个 PDF 页面显示为封面
【发布时间】：2019-02-28 01:04:21
【问题描述】：

我想改进我的脚本，以便在用户将鼠标移动到模板上的对象上时为每个对象设置 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 文件

【问题讨论】：

您为此使用 pdf.js，无需后端。你可以使用 js 做任何事情
好的，我得看看我怎么能做到这一点^^
mozilla.github.io/pdf.js，他们的网站，例如和东西
当你没有javascript知识时不容易，但谢谢你;）但是，如果有人可以帮助我解决我现有的代码^^

标签： javascript jquery ajax pdf pdf.js

【解决方案1】：

好的，您可以按照 cmets 中的说明进行操作：

Pdf.js 那么，

为要显示的页面创建模板 html
在您的 html 代码中添加以下行：

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

创建一个可以呈现您的 pdf 文件的画布：

&lt;canvas id="the-canvas"&gt;&lt;/canvas&gt;

创建一个名为“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 了解更多详细信息。

【讨论】：

我会用你的答案编辑我的问题，并向你展示我所拥有的。但到目前为止，我还没有克服显示我的 PDF。
如果你有任何东西和 django 日志，你能添加 chrome 控制台的日志吗？也打开窗口，当你点击你的 glyphicon 时没有任何反应？
我不会克服显示 glyphicon，但如果我的语法很好，我现在不会：<canvas class="the-canvas"><a href="http://localhost:8000/media/{{ document.upload }}"><span class="glyphicon glyphicon-blackboard"></span></a></canvas>。对于 Chrome 日志，我得到这个：TypeError: canvas.getContext is not a function

【解决方案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
在我的静态/主文件中，我添加了一个名为 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。

【讨论】：

谢谢你的回答，我想得到一些额外的建议，以便更进一步。它适用于 1 个 id，在我的情况下，我正在循环 django 变量，所以我的 id 看起来像这样：id='the-canvas_{{document.id}}'。是否可以在 customPdf.js 中添加类似这样的内容：var document_id = "{{document.id}}"; var canvas = document.getElementById('the-canvas_'+document_id);？
好的，这是我的建议：首先在包含出版物的 div 中，每个出版物都有一个字形图标，而不是为 pdf 文件打开一个新窗口，创建一个 GET 请求表单，将 id 传递给请求，然后在您的 django 视图中将 id 传递到您的 pdf 渲染页面的上下文中。