Django - JS: Как отобразить первую страницу PDF в качестве обложки - PullRequest
Новая
       7

Django - JS: Как отобразить первую страницу PDF в качестве обложки

0 голосов
/ 24 сентября 2018

Я хотел бы улучшить свой сценарий, чтобы установить титульную страницу PDF для каждого объекта, когда пользователь устанавливает объект поверх шаблона в шаблоне.

Фактический процесс:

До настоящего времени я мог загружать .pdf и .epub форматы файлов в соответствии с объектом с некоторыми полями дополнений: title, language ...

PDF хранится в каталоге media в моем проекте.

На главной странице я отображаю все объекты следующим образом:

enter image description here

Как вы можете видеть в конце каждой публикации, есть 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>

Полагаю, мне нужно обработать эту строку и добавить javascript из pdf.js, чтобы получить только первую страницу и отобразить ее в виде рисунка.

Я прочитал документацию PDF.js.и я хотел бы получить некоторую помощь для отображения моей первой страницы PDF.Документация и примеры из PDF.js разные, но я не могу понять, как я могу это сделать.

Редактировать:

Благодаря KedasМенди, это то, что я имею в соответствии с его ответом.Но я не могу показать свой 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

Ответы [ 2 ]

0 голосов
/ 25 сентября 2018

Хорошо, поэтому я должен был добавить еще один ответ для этого.

Мой рабочий проект: 

└───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-файл с именем pdf и main.js
  • В моем 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, см. для него.

0 голосов
/ 25 сентября 2018

Хорошо, что вы можете сделать, как указано в комментариях, перейдите по ссылке:

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);

По сути, это то, что вы хотите сделать, чтобы отобразить первую страницу, но, пожалуйста, обратитесь к документации для более подробной информации.

...