How to download a visiting card with dynamic content?
I am creating a django app, where i wanted to provide our clients a downloadable visiting card inside their account. For that i have a user models as follows:
class Country(models.Model):
name = models.CharField(max_length=100, unique=True)
class CustomUser(models.Model):
email = models.EmailField(max_length=255, unique=True)
first_name = models.CharField(max_length=100)
last_name = models.CharField(max_length=100)
contact_number = models.CharField(max_length=30)
country = models.ForeignKey(Country, on_delete=models.SET_NULL)
profile_pic = models.ImageField()
def full_name(self):
return f'{self.first_name} {self.last_name}'
my url is as follows:
from django.urls import path
from . import views
urlpatterns = [
path('visiting-card/<int:vid>', views.visitingCard, name='visiting-card'),
]
and i have created a view to get all the content from respective users:
def visitingCard(request, mid):
user = get_object_or_404(CustomUser, id=vid)
context = {
'user': user,
}
return render(request, 'visitng-card.html', context)
and the below code is my visting card landing page html file
{% extends 'base.html' %}
{% load static %}
{% block content %}
<div class="container-fluid">
<div class="main-content-body">
<div class="row row-sm">
<div class="col-lg-4">
<div class="card crypto crypt-primary overflow-hidden">
<div class="card-body">
<div style="position: relative;" >
<img src="{% static 'dashboard/img/visiting-card-bg.jpg' %}" />
</div>
<div style="position: absolute; top: 90px; left: 85px;" >
<img src="{{user.profile_pic.url}}" alt="{{user.full_name}}" style="max-width:130px;" class="rounded">
</div>
<div style="position: absolute; top: 100px; left: 230px;">
<p>
<strong>Name: {{user.full_name}}</strong><br>
<strong>Country: {{user.country.name}}</strong><br>
<strong>Email: {{user.email}}</strong><br>
<strong>Contact: {{user.contact_number}}</strong><br>
</p>
</div>
<div class="pt-3">
<a href="#" target="_blank" class="btn btn-success">Download Now</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
So my question is when i click the download button, it should download the jpg file with dynamic content from the above code.
What you want is to click Download Now to jump out of the download options? instead of showing the image page?
<a href="#" target="_blank" class="btn btn-success">Download Now</a>
change to
<a href="#" target="_blank" class="btn btn-success" download>Download Now</a>
You can look here.