将PDF放在模态引导程序中，并使用PDFOBject-增加文件

Question

我正在尝试将PDF显示在模态引导中。我在应用程序中使用的DataTables，表格的头部由文档标题，类别，日期和文档视图组成。在视图文档列的正文中，我有一个按钮，当用户单击模式时，也打开了pdf。

我表中的每一行都有不同的PDF文档，这是我的问题，我无法将PDF引用到其各自模式中的每一行。在任何行上打开的PDF始终是我表中添加的最后一个文档。

在该应用程序中，我正在使用firebase，pdfobject插件来添加模态的pdf和bootstrap。

我的代码如下：

javaScript：

<script type="text/javascript">
    var documentosRef = firebase.database().ref('documentos');
    function initFirebase(){
        function carregaDocumentos(){
            documentosRef.on('value', function(data){
                headertb = isAdmin ? "<th>Título</th><th>Data de Inclusão</th><th>Categoria</th><th>Editar</th><th>Excluir</th>" : "<th>Título</th><th>Data de Inclusão</th><th>Categoria</th><th>Visualizar</th>";
                $('#tableCustom thead tr').html(headertb);

                $("#tableCustom").dataTable().fnDestroy();
                $('#tableCustom tbody').html('');
                for(var key in data.val()){
                    documento = data.val()[key]
                    if(isAdmin){
                        linha = "<tr>"+
                                    "<td>"+documento.titulo+"</td>"+
                                    "<td>"+documento.data_inicio+"</td>"+
                                    "<td>"+documento.categoria+"</td>"+
                                    "<td class='edit'><a href='documentos/"+key+"/edit'><i class='fa fa-edit'></i></a></td>"+
                                "</tr>";
                        $('#tableCustom tbody').append(linha);
                    }
                    else{
                        linha = "<tr>"+
                                    "<td>"+documento.titulo+"</td>"+
                                    "<td>"+documento.data_inicio+"</td>"+
                                    "<td>"+documento.categoria+"</td>"+
                                    "<td class='view'><a data-toggle='modal' data-target='#myModal'><i class='fa fa-eye'></i></a></td>"+
                                "</tr>";
                        $('#tableCustom tbody').append(linha);  
                        PDFObject.embed(documento.arquivo, ".modal-content");
                    }
                }
                closeLoader();
                 var table = $('#tableCustom').DataTable({
                    "aaSorting": [[ 0, "asc" ]],
                     "oLanguage": {
                        "sUrl": "/datatable_pt.txt"
                    },
                    "aoColumnDefs": [
                        { "bSortable": true, "aTargets": [ 0 ] },
                        { "bSearchable": true, "aTargets": [ 0, 1, 2 ] }
                    ]
                 });
                $("#select-categories").each( function ( i ) {
                    var select = $('<select><option value=""></option></select>')
                        .appendTo( $(this).empty() )
                        .on( 'change', function () {
                            table.column( [2] )
                                .search( $(this).val() )
                                .draw();
                        } );
                    table.column([2]).data().unique().sort().each( function ( d, j ) {
                        select.append( '<option value="'+d+'">'+d+'</option>' )
                    } );
                } );
            });
        }
        carregaDocumentos();
    }
</script>

html：

    <div id="body">
        <header>
            Documentos
        </header>
        <section>
        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                </div>
            </div>
        </div>
        <table id="tableCustom">
            <div id="select-categories"></div>
            <thead>
                <tr>
                </tr>
            </thead>
            <tbody>
            <!--oddloop-->
            <!--oddloop-->
            </tbody>
        </table>
    </section>
</div>

Answer 1

您将文档嵌入到循环中的每一行中。每次迭代后，嵌入模式内的先前文档被覆盖，因此最后一个文档是唯一可见的文档。

当单击"视图"按钮时，您应该使用嵌入式文档填充模态，而不是填充模态。这可以通过将documento.arquivo作为数据属性添加到相应的行模式切换按钮。