Django: Off画布pdf预览迭代问题

Question

Hy guys

我正在设置一个页面，其中有一个表格，其中包含一些有关pdf文件的元数据。

当然，为了便于用户使用，我想给用户一个存储文件的预览，我想在画布上这样做。

我的html文件

 <h5>Add a document </h5>
  <div class="addition">
    <form method="POST" action="" enctype='multipart/form-data' autocomplete="off">
      {% csrf_token %}                


        <div>

            <input type="text" class="form-control form-control-sm" aria-describedby="emailHelp" placeholder="name" name="name" maxlength="50" autocomplete="off">
          </div>
          <div>
              <label for="myfile">Select a file:</label>
            <input type="file" id="myfile" name="pdf">
          </div>
        <div>
            <button type="submit" class="btn btn-sm btn-primary">Submit</button>
           </div>
         </form>
        </div>




       <h4>Overview documents</h4>
       <div class="table-responsive">
    <table class="table table-striped table-sm">
      <thead>
        <tr>
          <th>#</th>
          <th>Name</th>
          <th>Descritpion</th>
          <th></th>
          <th></th>

        </tr>
      </thead>
      <tbody>
        {% for item in all_pdfs %}   
            <tr>                    
            <td>{{ forloop.counter }}</td>
                <td>{{ item.name }}</td>
                <td><a href="{{item.pdf.url}}">{{ item.name }}</a></td>
                <td>
              <div>
                    <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>

                        <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
                          <div class="offcanvas-header">
                            <h5 id="offcanvasRightLabel">Offcanvas right</h5>
                            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                          </div>
                          <div class="offcanvas-body">
                             <embed src="{{ item.pdf.url }}" type="application/pdf" height="700px" width="350">
                          </div>
                        </div>
              </div>
                </td>
          </tr>

            {% endfor %}
        </tbody>
    </table>
</div>

此html页面包含两个部分:表示我数据库中所有记录的实际表单和表下面。

models.py

class TestPDF(models.Model):
name = models.CharField(max_length=50, default=None, null=True, blank=True)
pdf = models.FileField(upload_to='test')

views.py

def test(request):
all_pdfs = TestPDF.objects.all()
    if request.method == "POST":
        settings_form = TestPDFForm(request.POST or None, request.FILES or None)

        if settings_form.is_valid():
            settings_form.save()

        return render(request, 'test.html', {"all_pdfs": all_pdfs})
    else:
        return render(request, 'test.html', {"all_pdfs": all_pdfs})
return render(request, 'test.html', {"all_pdfs": all_pdfs})

最后我的

forms.py

class TestPDFForm(forms.ModelForm):
class Meta:
    model = TestPDF
    fields = ['name', 'pdf']

普通行为我想点击一个随机按钮并在画布上看到相应的pdf文档

问题：当我点击任何东西的按钮时，我在画布上得到错误的预览。我总是得到第一个PDF，而在表中的链接正确地对应正确的pdf。因此，出于某种原因，离开画布不能正确地在最后一个表中迭代。这个问题困扰了我很长一段时间，我还没有找到任何解决办法。

非常感谢你的想法！

Answer 1

id属性在html文档中应该是唯一的。参考https://www.w3.org/TR/2011/WD-html5-20110525/...

id属性指定其元素的唯一标识符(ID)。该值在元素主子树中的所有ID中必须是唯一的，并且必须至少包含一个字符。

当我们需要一个循环中的多个id时，我们应该做什么？使用forloop.counter (Reference for template tag [Django docs])创建唯一的id。

{% for item in all_pdfs %}
    <tr>
        <td>{{ forloop.counter }}</td>
        <td>{{ item.name }}</td>
        <td><a href="{{item.pdf.url}}">{{ item.name }}</a></td>
        <td>
            <div>
                <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight-{{ forloop.counter }}" aria-controls="offcanvasRight">Toggle right offcanvas</button>
                <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight-{{ forloop.counter }}" aria-labelledby="offcanvasRightLabel-{{ forloop.counter }}">
                    <div class="offcanvas-header">
                        <h5 id="offcanvasRightLabel-{{ forloop.counter }}">Offcanvas right</h5>
                        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                    </div>
                    <div class="offcanvas-body">
                        <embed src="{{ item.pdf.url }}" type="application/pdf" height="700px" width="350"> </div>
                    </div>
                </div>
        </td>
    </tr>
{% endfor %}