Queryselector失败，无法添加内部标签

发布于 2025-01-31 05:44:44 字数 2015 浏览 3 评论 0原文

我的目标是显示Blob URL的PDF。我想将标签添加到HTML代码＆lt; iframe src ='$ {bloburl}'type =“ application/pdf”＆gt;＆lt;/iframe＆gt;以显示PDF文件。这是完整的代码：

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 class="pdfdisplay"></div>


    <script>
        function b64toBlob(b64Data, contentType, sliceSize) {
            contentType = contentType || '';
            sliceSize = sliceSize || 512;

            var byteCharacters = atob(b64Data);
            var byteArrays = [];

            for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
                var slice = byteCharacters.slice(offset, offset + sliceSize);

                var byteNumbers = new Array(slice.length);
                for (var i = 0; i < slice.length; i++) {
                byteNumbers[i] = slice.charCodeAt(i);
                }

                var byteArray = new Uint8Array(byteNumbers);

                byteArrays.push(byteArray);
            }
                
            var blob = new Blob(byteArrays, {type: contentType});
            return blob;
            }

            var contentType = 'application/pdf';
            var b64Data =  JSON.parse(document.getElementById('mydata').textContent);

            var blob = b64toBlob(b64Data, contentType);
            var blobUrl = URL.createObjectURL(blob);

            const target = document.querySelector('div.pdfdisplay');

            target.innerHTML = <iframe src='${blobUrl}' type="application/pdf"></iframe>;
    </script>
</body>
</html>

当我检查生成的页面时，没有添加到＆lt; div class =“ pdfdisplay”＆gt;＆lt;/div;/div＆gt; 页面是空白的。我知道该错误来自其他问题，但我看不出有什么问题。

谢谢

原文

My goal is to display a pdf from a blob Url. I want to add a tag to the html code <iframe src='${blobUrl}' type="application/pdf"></iframe> to display the pdf file. Here is the full code :

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 class="pdfdisplay"></div>


    <script>
        function b64toBlob(b64Data, contentType, sliceSize) {
            contentType = contentType || '';
            sliceSize = sliceSize || 512;

            var byteCharacters = atob(b64Data);
            var byteArrays = [];

            for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
                var slice = byteCharacters.slice(offset, offset + sliceSize);

                var byteNumbers = new Array(slice.length);
                for (var i = 0; i < slice.length; i++) {
                byteNumbers[i] = slice.charCodeAt(i);
                }

                var byteArray = new Uint8Array(byteNumbers);

                byteArrays.push(byteArray);
            }
                
            var blob = new Blob(byteArrays, {type: contentType});
            return blob;
            }

            var contentType = 'application/pdf';
            var b64Data =  JSON.parse(document.getElementById('mydata').textContent);

            var blob = b64toBlob(b64Data, contentType);
            var blobUrl = URL.createObjectURL(blob);

            const target = document.querySelector('div.pdfdisplay');

            target.innerHTML = <iframe src='${blobUrl}' type="application/pdf"></iframe>;
    </script>
</body>
</html>

When I inspect the page generated, nothing is added to <div class="pdfdisplay"></div>
and the page is blank. I know that the error comes from ther queryselector but I do not see what is wrong.

Thanks

分享到QQ

分享到微博