Как загрузить визитную карточку с динамическим содержимым?

Я создаю приложение на django, в котором я хочу предоставить нашим клиентам загружаемую визитную карточку внутри их аккаунта. Для этого у меня есть пользовательская модель следующего вида:

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}'

мой url выглядит следующим образом:

from django.urls import path
from . import views

urlpatterns = [
    path('visiting-card/<int:vid>', views.visitingCard, name='visiting-card'),
]

def visitingCard(request, mid):
    user = get_object_or_404(CustomUser, id=vid)
    context = {
        'user': user,
    }
    return render(request, 'visitng-card.html', context)

а нижеприведенный код - это мой html-файл целевой страницы визитной карточки

{% 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 %}

Мой вопрос в том, что когда я нажимаю на кнопку загрузки, он должен загрузить файл jpg с динамическим содержимым из приведенного выше кода.

<a href="#" target="_blank" class="btn btn-success">Download Now</a>

<a href="#" target="_blank" class="btn btn-success" download>Download Now</a>