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

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

实际流程：

到目前为止，我可以根据一个对象上传

.pdf

和

.epub

文件格式，还有一些附加字段：

标题

，

语言

PDF存储在我的项目的

媒体

目录中

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

正如您在每个出版物的末尾所看到的，到目前为止，有一个

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>

和我的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文件。好的，那么，您可以按照评论中的说明执行以下操作：

那么

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

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

---

好的，所以我不得不为这个问题添加另一个答案

我的项目工作树：

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

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

• 在your settings.py中，将已安装的应用程序添加到您的应用程序名称中
• 完整的HTML代码：

页面标题
测试

你可以使用pdf.js，不需要后端。你可以使用jsOk做任何事情，我必须看看我如何做^^，他们的网站，例如，当你没有javascript知识时，这并不容易，但谢谢；）但是，如果有人能帮我使用我现有的代码^^^我会用你的答案编辑我的问题，并向你展示我的想法但是到目前为止，我还不能显示我的PDF。如果你有任何东西和django日志，你可以添加chrome控制台的日志吗？当你点击glyphicon时，窗口是否打开，什么都没有发生？我不能显示glyphicon，但我现在不知道我的语法是否正确：

。对于chrome日志，我得到以下信息：

类型错误：canvas.getContext不是一个函数

谢谢你，你的答案很有效，我想得到一些进一步的建议。它适用于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中，每个出版物都有一个glyphicon，然后为pdf文件打开一个新窗口，创建一个GET请求表单，将id传递给请求，然后在django视图中将id传递到pdf呈现页面的上下文中。

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