pdfobject - 파일 증가로 모달 부트 스트랩에 pdf 넣기

모달 부트 스트랩에 pdf를 표시하려고합니다. 내 응용 프로그램에서 datatables 사용하고 내 머리글 문서 제목, 범주, 날짜 및 문서보기 구성됩니다. 문서보기 열의 본문에는 사용자가 모달을 클릭하면 열리고 PDF가 열리는 버튼이 있습니다.pdfobject - 파일 증가로 모달 부트 스트랩에 pdf 넣기

내 테이블의 각 줄마다 다른 PDF 문서가 있으며 여기에 내 문제가 있습니다. pdf를 각 모달의 각 행을 참조 할 수 없습니다. 모든 라인에서 열리는 PDF는 항상 내 테이블에 추가 된 마지막 문서입니다.

해당 응용 프로그램에서 pdfobject 플러그인을 사용하여 firebase를 사용하여 pdf 및 부트 스트랩을 모달에 추가합니다.

내 코드는 다음과 같습니다 :

자바 스크립트 :

<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>

출처

2017-12-24 Denis Policarpo