如何在带有按钮的引导程序模式中显示pdf blob

时间:2020-04-07 00:46:47

标签: javascript php ajax bootstrap-modal

我是开发网络的初学者 我有一个带有两列(id,action(按钮))的面板,当我单击查看按钮时,我希望它向我显示数据库中pdf第一列的内容。

请帮助。

`require 'Class-BD.php';
 $db = Base_D::connect();
 $r= "SELECT * FROM bon_commande where Num_Bc='".$_POST['numbc']."'";
 $res = $db->query($r);
 $row = $res->fetch();
 header("Content-type:application/pdf");
 echo base64_decode($row['Bon_Commande']);  `

 <tr>
             <td><?php echo $row['Num_Bc']; ?></td>

             <td  class="text-center">
                <button type="button" class="btn btn-xs btn-outline-info btn-rounded view"><i class="fa fa-eye" style="font-size:14px;color:black"></i></button>
              </td>

</tr>


    <script>
  $(document).ready(function()
  {
    $('.view').on('click',function()
     {

        $('#boncommande').modal('show');

         $tr = $(this).closest('tr');

        var data = $tr.children("td").map(function()
            {
            return $(this).text();
            }).get();

         var numbc = data[0];

         $.ajax({
                 url: "Viewpdf.php",
                 type: "POST",
                 data :{numbc:numbc},
                 success:function(data)
                  {

                  }
           })



    });

  });

</script> 

1 个答案:

答案 0 :(得分:0)

您应该使用iframe并使用blob更新“ src”属性:

<iframe id="displayZone" src="" type="application/pdf" width="100%" height="100%" style="overflow: auto;">

$.ajax({
  url: "Viewpdf.php",
  type: "POST",
  data :{numbc:numbc},
  success:function(data){
    let blob = new Blob([data], { type: contentType });
    let blobUrl = window.URL.createObjectURL(blob);
    $('#displayZone').attr('src', blobUrl);
  }
})