Javascript : отображение PDF с блобом из строки base64
Я хочу отобразить pdf в браузере. Содержимое pdf загружается из хранилища azure blob и затем кодируется в строку base64. Затем я передаю это содержимое в html-шаблон для декодирования и отображения. Ниже приведена моя первая попытка с помощью views.py из моего приложения django, которая работает, но только для файлов размером менее 2 МБ.
views.py
def displayFILE(request, file_id):
context = initialize_context(request)
file = UploadFilesAAD.objects.get(pk=file_id)
filename = file.Filename
file_type, _ = mimetypes.guess_type(filename)
url = file.Url
blob_name = url.split("/")[-1]
blob_content = download_from_blob(blob_name)
encodedstring = base64.b64encode(blob_content.readall())
content = blob_content.readall()
context["content"] = str(content)
context["encodedstring"] = str(encodedstring)[1:].replace("'","")
return render(request, 'archivage/displayFILE.html', context)
html
{% load static %}
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<object>
<embed id="pdfID" type="text/html" width="100%" height="100%" src="data:application/pdf;base64,{{ encodedstring }}" />
</object>
</body>
</html>
Я не хочу ограничений на размер файла, поэтому пытаюсь писать с помощью Javascript. Сначала я конвертирую строку в кодировке в Blob. Затем я генерирую временную DOM-строку на основе Blob. Наконец, я отображаю ее. Мой код не работает, но я не понимаю, что не так. Я изучаю Javascript, поэтому, возможно, я что-то упускаю.
новый html
{% load static %}
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
{{ encodedstring | json_script:'mydata' }}
<div id="pdf"></div>
<script>
const mydata = JSON.parse(document.getElementById('mydata').textContent);
const b64toBlob = (b64Data, contentType='', sliceSize=512) => {
const byteCharacters = atob(b64Data);
const byteArrays = [];
for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
const slice = byteCharacters.slice(offset, offset + sliceSize);
const byteNumbers = new Array(slice.length);
for (let i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
const blob = new Blob(byteArrays, {type: contentType});
return blob;
}
const contentType = 'application/pdf';
const blob = b64toBlob(mydata, contentType);
var temp_url = window.URL.createObjectURL(blob);
const target = document.querySelector('pdf');
target.innerHTML = <iframe src='${temp_url}' type="application/pdf"></iframe>;
</script>
</body>
</html>
Спасибо