在Bootstrap Accordion中加载PDF

<div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Section 1
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        <!-- 在这里加载PDF文件 -->
      </div>
    </div>
  </div>
</div>

<embed src="path/to/your/pdf.pdf" type="application/pdf" width="100%" height="600px" />

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

<div id="pdfContainer"></div>

// 获取PDF文件的URL
var pdfUrl = 'path/to/your/pdf.pdf';

// 获取容器元素
var container = document.getElementById('pdfContainer');

// 加载PDF文件
PDFJS.getDocument(pdfUrl).then(function(pdf) {
  // 获取第一页
  pdf.getPage(1).then(function(page) {
    var scale = 1.5;
    var viewport = page.getViewport(scale);

    // 创建一个Canvas元素来显示PDF内容
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    container.appendChild(canvas);

    // 渲染第一页
    page.render({
      canvasContext: context,
      viewport: viewport
    });
  });
});