问题
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:
Up to now, I can upload .pdf and .epub file formats according to an object with some additionnals fields : title, language ...
The PDF is stored into media directory in my project.
In the main page, I display all objects like this :
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:
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.
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>
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.
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 :
Thanks to Kedas mendi, this is what I have according to his answer. But I don't overcome to display my pdf.
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>
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);
});
Up to now, getDocument() is pointing to a specific pdf file, but it will be a django variable at the end.
Anyway, I don"t display any PDF file
回答1:
Okay so, what you can do as mentioned in the comments go to :
Pdf.js Then,
Create a template html for the page you want to display
Add the following lines in your html code:
<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
<script src="customPdf.js">- Create a canvas that will render your pdf file:
<canvas id="the-canvas"></canvas>- Create a new file named 'customPdf.js' and add what's next
- Use this to load the pdf object
pdfjsLib.getDocument('/media/{{ document.upload }}').then(function(pdf) {
// you can now use *pdf* here
});- You can also play with the settings to display it with the style you want:
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
};- Finally you can render the page
page.render(renderContext);Basically this is what you wanna do to render the first page, but please refer to the documentation for mor details.
回答2:
Alright so i had to add another answer for this.
My project worktree:
└───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:
- In your settings.py, add in INSTALLED_APPS your app name.
- The complete HTML code:
<!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>- In your project, you should have created a folder named static, inside it a folder with the name of the app, inside it you can put your static files, i.e:css/js
- In my static/main i added a pdf file named pdf and main.js
- In my main.js i have this code added to render the first page of the 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);
});
});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.
来源：https://stackoverflow.com/questions/52480677/django-js-how-to-display-the-first-pdf-page-as-cover