js下载媒体文件（分片下载）

html:

    <div class="usnbox">
        <div class="usnboxbody usnboxbody_rtm">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">时长</label>
                    <div class="layui-input-inline">
                        <input type="text" name="timelength" value="" autocomplete="off" placeholder="时长" class="layui-input noedit" disabled>
                    </div>
                    <label class="layui-form-label">文件大小</label>
                    <div class="layui-input-inline">
                        <input type="text" name="filesize" value="" autocomplete="off" placeholder="文件大小" class="layui-input noedit" disabled>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">文件名称<span class="usStar"></span></label>
                <div class="layui-input-block">
                    <input type="text" name="filename" lay-verify="required" autocomplete="off" placeholder="文件名称"
                           class="layui-input noedit" disabled>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    文件地址<span class="usStar"></span>
                </label>
                <div class="layui-input-block">
                    <input type="text" name="vurl" lay-verify="required" autocomplete="off" placeholder="文件路径"
                           class="layui-input noedit" disabled>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-progress layui-progress-big" style="width:100%;margin-top:20px;" lay-showPercent="true" lay-filter="updprogress">
                    <div class="layui-progress-bar" lay-percent="0%"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-form-item us-submitsave">
        <div class="uscenter">
            <button class="layui-btn" onclick="upload()"><i class="us-icon">&#xe619;</i>下载</button>
            <button type="button" class="layui-btn layui-btn-primary" data-pwid="usclose"><i class="us-icon">&#xe638;</i>关闭</button>
        </div>
    </div>

js方法实现下载：

<script> 
var element;
    $(function () {
        //layui操作句柄
        layui.use('element', function () {
            element = layui.element;
        })
    })

async function upload() {
        //获取文件路径
        var vurl = $("input[name=vurl]").val();
        //获取文件名称
        var filename = $("input[name=filename]").val();
        const CHUNK_SIZE = 1024 * 1024 * 10; // 每次下载10MB
        const response = await fetch(vurl);
        const contentRange = response.headers.get('content-range');
       //获取下载文件大小
        const fileSize = contentRange ? Number(contentRange.split('/')[1]) : response.headers.get('content-length');
        const fileStream = [];
        let offset = 0;
        //进行分片
        while (offset < fileSize) {
            const end = Math.min(offset + CHUNK_SIZE, fileSize);
            const options = {
                headers: { 'Range': `bytes=${offset}-${end - 1}` }
            };
            const blob = await fetch(vurl, options).then(res => res.blob())
            fileStream.push(blob);
            offset = end;
            //console.error(offset);
            //console.error(fileSize);
            var p = Math.floor(offset / fileSize * 100);
            //设置layui进度条
            setprogress(p);
        };
        //结束后，组装分片
        const blob = new Blob(fileStream, { type: response.headers.get('content-type') });
       //保存，触发浏览器的下载窗口
        saveAs(blob, filename);
    }

    //保存
    function saveAs(blob, filename) {
        const a = document.createElement('a');
        a.href = URL.createObjectURL(blob);
        a.download = filename;
        a.click();
    }

    //设置layui进度条(动态)
    function setprogress(p) {
        p = p + '%';
        console.error(p);
        element.progress('updprogress', p);
    }
</script>

参考文献：

javascript 大文件下载，分片下载，断点续传

layui框架学习（12：进度条）