Question

当用户单击glyphicon时，我正在寻找显示预览。我尝试了一些方法，但是到目前为止，我还没有克服无法显示图片的问题。

我有一个非常简单的HTML代码，其中包含Javascript：

{% for document in publication.documents.all %}
    <table class="table table-condensed">
        <tbody>
            <tr>
                <script>
                    document.getElementById('cover-icon{{ document.id }}').onclick=function(){
                    // Remove any element-specific value, falling back to stylesheets
                    document.getElementById('coverPDF{{ document.id }}').style.display='';
                    };
                </script>

                <td class="col-md-1"><span class="glyphicon glyphicon-blackboard cover-icon" id="cover-icon{{ document.id }}"></span>
                    <div id="coverPDF{{ document.id }}" style="display: none;">
                        {% if document.format == 'pdf' %}

                            <script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>

                              <script type="text/javascript">
                              var document_upload = "{{ document.upload }}";
                              pdfjsLib.getDocument('http://localhost:8000/media/'+document_upload).then(function (pdf) {
                                pdf.getPage(1).then(function (page) {
                                    var scale = 0.30;
                                    var viewport = page.getViewport(scale);

                                    var canvas = document.getElementById('test{{ document.id }}');
                                    var context = canvas.getContext('2d');
                                    canvas.height = viewport.height;
                                    canvas.width = viewport.width;

                                    var renderContext = {
                                        canvasContext: context,
                                        viewport: viewport
                                    };
                                    page.render(renderContext);
                                });
                              });
                            </script>
                            <canvas id="test{{ document.id }}" style="border:1px solid #000000;"></canvas>
                        {% endif %}
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
{% endfor %}

我正在遍历文档对象列表，对于每个对象，我想单击glyphicon，以显示PDF.js内的第二个JS脚本给出的预览。第二个效果很好，但是我没有克服显示预览的问题。

你能帮我吗？我对javascript很陌生。

需要改进的代码是：

<script>
    document.getElementById('cover-icon{{ document.id }}').onclick=function(){
    // Remove any element-specific value, falling back to stylesheets
    document.getElementById('coverPDF{{ document.id }}').style.display='';
                    };
</script>

JS：在html循环中显示onclick内容

0 个答案: