CSS代码：

<style>
    /* 加载动画的样式 */
    .loader {
        border: 5px solid #f3f3f3;
        border-radius: 50%;
        border-top: 5px solid #3498db;
        width: 50px;
        height: 50px;
        animation: spin 2s linear infinite;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

</style>

HTML代码

 <button class="btn btn-danger download-files"><span class="glyphicon glyphicon-file"></span></button>

<div id="loadingContainer" style="display:none;margin-top: 10px;" class="row alert alert-info" tag="一键下载附件">
            <div class="col-md-4 col-md-offset-2">
                <h2>下载附件中</h2>
            </div>
            <div class="loader col-md-2"></div>
        </div>

JS代码

        <script src='https://unpkg.com/pdf-lib/dist/pdf-lib.js'></script>
        <script src='https://unpkg.com/pdf-lib/dist/pdf-lib.min.js'></script>

        <script>
            async function mergeAllPDFs(urls) {
                // 显示加载动画
                document.getElementById('loadingContainer').style.display = 'block';

                const pdfDoc = await PDFLib.PDFDocument.create();
                const numDocs = urls.length;

                for (var i = 0; i < numDocs; i++) {
                    const donorPdfBytes = await fetch(urls[i]).then(res => res.arrayBuffer());
                    const donorPdfDoc = await PDFLib.PDFDocument.load(donorPdfBytes);
                    const docLength = donorPdfDoc.getPageCount();
                    for (var k = 0; k < docLength; k++) {
                        const [donorPage] = await pdfDoc.copyPages(donorPdfDoc, [k]);
                        pdfDoc.addPage(donorPage);
                    }
                }

                const pdfBytes = await pdfDoc.save();
                const blob = new Blob([pdfBytes], { type: 'application/pdf' });
                const url = URL.createObjectURL(blob);

                // 隐藏加载动画
                document.getElementById('loadingContainer').style.display = 'none';

                // 创建一个下载链接
                const downloadLink = document.createElement('a');
                downloadLink.href = url;
                downloadLink.download = $("#hy_date").val() + "附件.pdf"; // 指定下载文件名
                document.body.appendChild(downloadLink); // 将链接添加到页面中
                downloadLink.click(); // 模拟点击以下载文件
                document.body.removeChild(downloadLink); // 下载后移除链接
                URL.revokeObjectURL(url); // 释放创建的URL对象
            }
      


            $(".download-files").click(function () {
                $.ajax({
                    url: "{:url('portal/topics/ajax_topics_download_files',['id'=>$info['id']])}",
                    success: function (data) {
                        if (data.status) {
                            let pdfs = [];
                            for (let index = 0; index < data.info.length; index++) {

                            
                                pdfs.push(data.info[index]['pdf']);


                            }
                            console.log(pdfs)
                            mergeAllPDFs(pdfs);
                        }
                    }
                })
            })
        </script>