如何在Django模板中显示从API接收的数据和图像/pdf

jgwigjjp  于 2023-04-22  发布在  Go
关注(0)|答案(1)|浏览(162)

我正在从REST API接收数据和文件。我想在同一个HTML模板中显示数据和文件。
此文件可以是图像(jpg/jpeg)或pdf文件。我能够在模板中显示数据。但我无法在模板中显示pdf/image文件。
请帮助系统如何检测文件的类型(图像或PDF),然后在模板中显示相同的。下面是我目前的代码:

def get_invoice_details(request,myid=''):
    
    try:
       
       mark_url = urlDataApiEndpoint
       
       data = {
           "myId":myid
        }

       response = requests.post(url=mark_url, headers=header, json=data)
       inv_data = response.json()
      )

       mark_url1 = urlFileApiEndPoint
       
       data1 = {
           "myid":myid,
            
        }

      
       response1 = requests.request("POST", mark_url1, headers=header, json=data)
       inv_img = response1.content
       

       return render(request, 'myTemplate.html',{'inv_data':inv_data} , {'inv_img':inv_img})
    except KeyError:
        print(KeyError)

myTemplate.html

<div> {{inv_data.invno}}

</div>

<div>
 <iframe src="{{inv_img}}#view=fitH" title="PDF file" height="100%" width="200px" /> 
</div>
wydwbb8l

wydwbb8l1#

然后从response.headers字典中提取content_type变量。如果内容类型指示文件是图像,则使用文件内容作为上下文变量来呈现image.html模板。如果内容类型指示文件是PDF,则使用pdf.html模板来呈现image.html模板。

import base64

def file_view(request, file_url):
    response = requests.get(file_url)
    content_type = response.headers.get('Content-Type')
    if 'image' in content_type:
        image_data = base64.b64encode(response.content).decode('utf-8')
        return render(request, 'image.html', {'image_data': f"data:image/jpeg;base64,{image_data}"})
    elif 'pdf' in content_type:
        pdf_data = base64.b64encode(response.content).decode('utf-8')
        return render(request, 'pdf.html', {'pdf_data': f"data:application/pdf;base64,{pdf_data}"})
    else:
        return HttpResponse('Unsupported file type')

在Django视图中,可以将image_data上下文变量设置为base64编码的图像数据来呈现这个模板

<!DOCTYPE html>
<html>
<head>
    <title>Image Preview</title>
</head>
<body>
    <h1>Image Preview</h1>
    <img src="{{ image_data }}" alt="Image">
</body>
</html>

在Django视图中,您可以使用设置为base64编码的PDF数据的pdf_data上下文变量来呈现此模板:

<!DOCTYPE html>
<html>
<head>
    <title>PDF Preview</title>
</head>
<body>
    <h1>PDF Preview</h1>
    <embed src="{{ pdf_data }}" type="application/pdf" width="100%" height="600px">
</body>
</html>

相关问题