在单个html页面中批量下载在多个类别下渲染的图像 [英] Bulk download of images rendered under mulitple categories in a single html page

问题描述

我在S3存储桶的单个文件夹中存储了很多图像。一共分为三类（假设是A，B和C），一张图片只能属于这三类。我正在view-all.html页面上明智地渲染所有图像类别。我想做的是在view-all.html中每个类别的名称旁边添加一个单独的下载按钮。单击特定的下载按钮后，仅应将该类别下存在的图像下载为zip文件。目前，下载按钮不适用于任何类别。

I have lot of images stored in a single folder in a S3 bucket. There are three categories(let's say A, B and C) and an image would fall into only one of the three categories. I am rendering all the images category wise on view-all.html page. What I am trying to do is add a separate download button beside the name of each category in the view-all.html. Upon clicking on a particular download button, the images present only under that category should be downloaded as a zip-file. Currently the download buttons are not working for any of the categories.

我仅编辑了view-all.html和views.py文件。我对此进行了大量搜索，但没有找到确切的解决方案。我不确定是否必须在任何其他文件中添加其他内容。请帮帮我。

I have edited only the view-all.html and the views.py files. I searched a lot about this but didn't find any exact solution. I am not sure whether I have to add anything else in any other file. Please help me out. Thanks in advance.

view-all.html

{% extends "cms/base.html" %}

{% block title %}
    View-all
{% endblock %}

{% block main %}
<style>
*{box-sizing: border-box;}
.wrapper{ 
    overflow-x:scroll;     
    white-space: nowrap;
}
.container {
    background: #ccc;
    position: relative;
    height: 50%;
    display: inline-block;
}
img {
    padding: 0;
    display: block;
    margin: 0 auto auto 0;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
   }
.overlay {
    position: absolute; 
    bottom: 0; 
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5);
    color: #f1f1f1; 
    width: 93%;
    transition: .5s ease;
    opacity:0;
    color: white;
    font-size: 20px;
    padding: 20px;
    text-align: center;
   }
.container:hover > .overlay {
    opacity: 1;
}
@media only screen and (max-width : 767px) 
{ 
    height: auto; 
    max-height: none; 
}
</style>
{% for category in categories %}
<br /><h3>{{ category.name }}&emsp;&emsp;<button name='downloadbtn' class="btn btn-primary" onclick='bulkdownload()'><i class="fa fa-download"></i> Download</button> </h3>
<div class="wrapper">   
    <div id="slider4" class="text-center">
        {%  for image in images %}
        {% ifequal image.category category %}
        <div class="container">
            <img src="S3-url"> 
            <br />
        </div>
        {% endifequal %}
        {% endfor %}
    </div>
</div>
{% endfor %}
{% endblock %}

views.py

@login_required
def bulkdownload(request):

    if(request.GET.get('downloadbtn')): 
        images = Images.objects.all().filter(category = request.category.name)
        if images:
            categories = request.category.name
            zip_subdir = '{:%B %d, %Y}'.format(datetime.now()) # name of the zip file to be downlaoded
            zip_filename = '%s.zip' % zip_subdir

            # Open StringIO to grab in-memory ZIP contents
            s = io.StringIO.StringIO()

            # The zip compressor
            zf = zipfile.ZipFile(s, 'w')

            for fpath in images:
            # Calculate path for file in zip
                fdir, fname = os.path.split(fpath)
                zip_path = os.path.join(zip_subdir, fname)

            # Add file, at correct path
            zf.write(fpath, zip_path)

            # Must close zip for all contents to be written
            zf.close()

            # Grab ZIP file from in-memory, make response with correct MIME-type
            resp = HttpResponse(s.getvalue(), content_type = 'application/x-zip-compressed')
            # ..and correct content-disposition
            resp['Content-Disposition'] = 'attachment; filename=%s' % zip_filename

            return resp

推荐答案

您可以创建表单并发布数据以下载图像，如下所示：

You can create forms and POST the data to download the images as:

{% for category in categories %}
  <form method='POST' action="{% url 'your_url_name_for_view' %}">
  <br /><h3>{{ category.name }}&emsp;&emsp;
  <input type="hidden" value="{{ category.id }}" name="category_id">
  <input name='downloadbtn' class="btn btn-primary" type="submit"><i class="fa fa-download"></i> Download</h3> 
 </form>
 <div class="wrapper">   
<div id="slider4" class="text-center">
    {%  for image in images %}
    {% ifequal image.category category %}
    <div class="container">
        <img src="S3-url"> 
        <br />
    </div>
    {% endifequal %}
    {% endfor %}
 </div>
</div>
{% endfor %}

现在您可以在视图中查看以下类别：

Now in your view you can check for the category as:

if request.method == 'POST': 
    category_id = request.POST.get('category_id')
    images = Images.objects.all().filter(category_id = category_id)

希望会有所帮助。

这篇关于在单个html页面中批量下载在多个类别下渲染的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！