使用bootstrap和codeigniter自定义pdf预览

Question

在引导程序的折叠菜单中有这种情况：

<div class="card">
<div class="card-header" id="headingTwo">
  <h5 class="mb-0">
    <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
      Analisi Rischi Meccanici
    </button>
  </h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
  <div class="card-body">
        <object type="application/pdf" width="100%" height="800px">
            Rischio gennaio 2019<br/><embed src="/cubo/Benvenuto.pdf" type="application/pdf" />
        </object>
  </div>
  <div class="card-body">
        <object type="application/pdf" width="100%" height="800px">
            Aggiornamento Febbraio 2019<br/><embed src="/cubo/Benvenuto.pdf" type="application/pdf" />
        </object>
  </div>
</div>

我得到这个：

我的先生要求是： 1）如果可以放大预览 2）如果它可能将预览与图片不一样

我需要用几句话来提供比现在最大的预览：

非常感谢 我希望你能帮助我：）

非常感谢；）

Answer 1

对此问题1尝试一下：

<object type="application/pdf" width="100%" height="800px">
        Rischio gennaio 2019<br/><embed src="/cubo/Benvenuto.pdf#zoom=100" type="application/pdf" />
</object>

根据您的喜好设置缩放并运行。

检查JS小提琴是否有问题2）：

.card_width {
width: 50%;
display: inline-block;
}

.float_right {
  float: right;
}

<div class="card">
<div class="card-header" id="headingTwo">
  <h5 class="mb-0">
    <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
      Analisi Rischi Meccanici
    </button>
  </h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
  <div class="card-body card_width">
        <object type="application/pdf" width="100%" height="800px">
            Rischio gennaio 2019<br/><embed src="/cubo/Benvenuto.pdf#zoom=100" type="application/pdf" />
        </object>
  </div>
  <div class="card-body float_right card_width">
        <object type="application/pdf" width="100%" height="800px">
            Aggiornamento Febbraio 2019<br/><embed src="/cubo/Benvenuto.pdf#zoom=100" type="application/pdf" />
        </object>
  </div>
</div>

</div>