This project demonstrates how to integrate the DearFlip PDF viewer into a Django application.
If you want to quickly examine the implementation:
# Clone the repository
git clone https://github.com/dearhive/dearflip-django.git
cd dearflip-django
# Install django
pip install django
# Migrate and Run
python manage.py migrate
python manage.py runserver
Visit http://127.0.0.1:8000/ to see your PDF displayed with DearFlip.
pip install djangodjango-admin startproject mysite
cd mysite
python manage.py startapp pdfviewer- Download DearFlip from the official website and add it to your project
- Create a structure like this:
public/
├── dflip/
│ ├── css/
│ ├── js/
│ ├── sound/
│ └── images/
└── pdf/
└── your-sample-pdf.pdf
Add the following to your your_project/settings.py:
INSTALLED_APPS = [
# ... other apps
'pdfviewer',
]
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [BASE_DIR / 'templates'], # Add this line
'APP_DIRS': True,
# ... other settings
},
]
# Static files configuration
STATIC_URL = 'static/'
STATICFILES_DIRS = [
BASE_DIR / 'public',
]
# Media files configuration
MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / 'media'Create templates/pdf_viewer.html:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PDF Viewer with dFlip</title>
<!-- dFlip CSS -->
<link rel="stylesheet" type="text/css" href="{% static 'dflip/css/dflip.min.css' %}">
<!-- jQuery -->
<script src="{% static 'dflip/js/libs/jquery.min.js' %}"></script>
<!-- dFlip JavaScript -->
<script src="{% static 'dflip/js/dflip.min.js' %}"></script>
</head>
<body>
<div class="container">
<h1>PDF Viewer</h1>
<!-- PDF display container -->
<div class="_df_book" data-option="dflipOptions" id="pdf-container"></div>
<script>
window.dflipOptions = {
source: "{% static 'pdf/the-three-musketeers.pdf' %}"
// for more options visit https://js.dearflip.com/docs
}
</script>
</div>
</body>
</html>In pdfviewer/views.py:
from django.shortcuts import render
from django.conf import settings
def pdf_viewer(request):
# Path to the sample PDF, relative to the static directory
# pdf_url = settings.STATIC_URL + 'pdf/your-sample-pdf.pdf'
context = {
# pdf_url
}
return render(request, 'pdf_viewer.html', context)Create pdfviewer/urls.py:
from django.urls import path
from . import views
app_name = 'pdfviewer'
urlpatterns = [
path('', views.pdf_viewer, name='pdf_viewer'),
]Update mysite/urls.py:
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('admin/', admin.site.urls),
path('pdf/', include('pdfviewer.urls')),
path('', include('pdfviewer.urls')), # Optional: Make PDF viewer the homepage
]
# Serve static and media files in development
if settings.DEBUG:
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)python manage.py migrate
python manage.py runserverVisit http://127.0.0.1:8000/ to see your PDF displayed with DearFlip.
You can customize the DearFlip viewer by adding additional attributes to the div with _df_book class. See the official DearFlip documentation for more options.
Make sure to purchase a valid license from DearFlip if you're using this in a production environment.