原生js实现在线批量打包压缩下载多个word文档

先引入这三个js

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="js/axios.min.js"></script>
//github下载地址：https://github.com/Stuk/jszip    npm install jszip
<script src="js/jszip.js"></script>
//FileSaver.min.js：https://download.csdn.net/download/weixin_45791806/87272893
<script src="js/FileSaver.min.js"></script>

测试的HTML

    <li>
         <div class="num">1</div>
         <div class="title">
             20以内的退位减法口算练习题
         </div>
         <div class="ul-checked ul-unchecked" data-id="657636"></div>
     </li>
     <li>
          <div class="num">1</div>
          <div class="title">
              20以内的退位减法口算练习题
          </div>
          <div class="ul-checked ul-unchecked" data-id="657637"></div>
      </li>
      <li>
          <div class="num">1</div>
          <div class="title">
              20以内的退位减法口算练习题
          </div>
          <div class="ul-checked ul-unchecked" data-id="657638"></div>
      </li>
      <li>
          <div class="num">1</div>
          <div class="title">
              20以内的退位减法口算练习题
          </div>
          <div class="ul-checked ul-unchecked" data-id="657639"></div>
      </li>
      <li>
          <div class="num">1</div>
          <div class="title">
              20以内的退位减法口算练习题
          </div>
          <div class="ul-checked ul-unchecked" data-id="657640"></div>
      </li>

点击批量下载

var app = {
        init() {
            app.Event();
        },
        Event() {
            // 批量下载 btn-batch-down批量下载的按钮
            $('.btn-batch-down').click(function () {
                var DownBox = new Array();
                // 文件下载链接
                var DownUrl = 'https://xxxxxxxxxxxx';
                $('.ul-checked').each(function (i, k) {
                    // 循环获取文件id
                    var id = $(k).attr('data-id');
                    // 拼接成完成的下载链接
                    var DownLink = DownUrl + id + '/';
                    // 创建对象  注意：fileName这个文件名不能重复，可以加个索引
                    var obj = {
                        path:DownLink,
                        fileName:''+id+'.docx'//文件名称
                    }
                    DownBox.push(obj);
                });
                app.handleDownload(DownBox)
            });
        },
        /**
         * 下载按钮点击事件
         */
        handleDownload(data) {
            const zip = new JSZip();
            const promises = [];
            data.forEach(item => {
                const promise = this.getFile(item.path).then(data => {
                	//文件名称，data 是内容
                    const file_name = item.fileName;
                    zip.file(file_name,data, { binary: true });
                });
                promises.push(promise)
            })
            Promise.all(promises).then(() => {
                zip.generateAsync({ type: 'blob' }).then(content => {
                    // 利用file-saver保存文件  自定义文件名
                    saveAs(content, '文件下载.zip') 
                })
            })
        },
        /**
         * 获取文件
         * @param url 文件路径
         * @returns {Promise<unknown>}
         */
        getFile(url) {
            return new Promise((resolve, reject) => {
                axios({
                    method: 'get',
                    url,
                    responseType: 'blob'
                })
                .then(data => {
                    console.log('data', data)
                    resolve(data.data)
                })
                .catch(error => {
                    reject(error.toString())
                })
            })
        }

    }
    app.init();