Java-断点下载

转x33g5p2x  于2022-05-28 转载在 Java  
字(9.5k)|赞(0)|评价(0)|浏览(368)

介绍

当下载一个很大的文件时，如果下载到一半暂停，如果继续下载呢？断点下载就是解决这个问题的。
具体原理:
利用indexedDb,将下载的数据存储到用户的本地中,这样用户就算是关电脑那么下次下载还是从上次的位置开始的

  1. 先去看看本地缓存中是否存在这个文件的分片数据,如果存在那么就接着上一个分片继续下载(起始位置)
  2. 下载前先去后端拿文件的大小,然后计算分多少次下载(n/(1024*1024*10)) (结束位置)
  3. 每次下载的数据放入一个Blob中,然后存储到本地indexedDB
  4. 当全部下载完毕后,将所有本地缓存的分片全部合并,然后给用户

有很多人说必须使用content-length、Accept-Ranges、Content-Range还有Range。 但是这只是一个前后端的约定而已,所有没必须非要遵守,只要你和后端约定好怎么拿取数据就行

难点都在前端:

  1. 怎么存储
  2. 怎么计算下载多少次
  3. 怎么获取最后下载的分片是什么
  4. 怎么判断下载完成了
  5. 怎么保证下载的分片都是完整的
  6. 下载后怎么合并然后给用户

效果

前端代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  13. <h1>html5大文件断点下载传</h1>
  14. <div id="progressBar"></div>
  15. <Button id="but">下载</Button>
  16. <Button id="stop">暂停</Button>
  18. <script type="module">
  20.     import FileSliceDownload from '/src/file/FileSliceDownload.js'
  21.     let downloadUrl = "http://localhost:7003/fileslice/dwnloadsFIleSlice"
  22.     let fileSizeUrl = "http://localhost:7003/fileslice/fIleSliceDownloadSize"
  23.     let fileName = "Downloads.zip"
  24.     let but = document.querySelector("#but")
  25.     let stop = document.querySelector("#stop")
  26.     let fileSliceDownload = new FileSliceDownload(downloadUrl, fileSizeUrl);
  27.     fileSliceDownload.addProgress("#progressBar")
  28.     but.addEventListener("click",  function () {
  29.         fileSliceDownload.startDownload(fileName)
  30.     })
  31.     stop.addEventListener("click",  function () {
  32.         fileSliceDownload.stop()
  33.     })
  35. </script>
  37. </body>
  39. </html>
  1. class BlobUtls{
  3.     // blob转文件并下载
  4.    static  downloadFileByBlob(blob, fileName = "file")  {
  5.         let blobUrl = window.URL.createObjectURL(blob)
  6.         let link = document.createElement('a')
  7.         link.download = fileName || 'defaultName'
  8.         link.style.display = 'none'
  9.         link.href = blobUrl
  10.         // 触发点击
  11.         document.body.appendChild(link)
  12.         link.click()
  13.         // 移除
  14.         document.body.removeChild(link)
  15.     }
  17. }
  18. export default BlobUtls;
  1. //导包要从项目全路径开始,也就是最顶部
  2. import BlobUtls  from '/web-js/src/blob/BlobUtls.js'
  3. //导包
  4. class FileSliceDownload{
  5.     #m1=1024*1024*10 //1mb  每次下载多少
  6.     #db   //indexedDB库对象
  7.     #downloadUrl  // 下载文件的地址
  8.     #fileSizeUrl  // 获取文件大小的url
  9.     #fileSiez=0  //下载的文件大小
  10.     #fileName  // 下载的文件名称
  11.     #databaseName="dbDownload";  //默认库名称
  12.     #tableDadaName="tableDada"  //用于存储数据的表
  13.     #tableInfoName="tableInfo"  //用于存储信息的表
  14.     #fIleReadCount=0 //文件读取次数
  15.     #fIleStartReadCount=0//文件起始的位置
  16.     #barId = "bar"; //进度条id
  17.     #progressId = "progress";//进度数值ID
  18.     #percent=0 //百分比
  19.     #checkDownloadInterval=null; //检测下载是否完成定时器
  20.     #mergeInterval=null;//检测是否满足合并分片要求
  21.     #stop=false; //是否结束
  22.     //下载地址
  23.     constructor(downloadUrl,fileSizeUrl) {
  24.         this.check()
  25.         this.#downloadUrl=downloadUrl;
  26.         this.#fileSizeUrl=fileSizeUrl;
  27.     }
  29.     check(){
  30.        let indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB ;
  31.         if(!indexedDB){
  32.             alert('不支持');
  33.         }
  34.     }
  36.     //初始化
  37.     #init(fileName){
  38.         return   new Promise((resolve,reject)=>{
  39.             this.#fileName=fileName;
  40.             this.#percent=0;
  41.             this.#stop=false;
  42.             const request = window.indexedDB.open(this.#databaseName, 1)
  43.             request.onupgradeneeded = (e) => {
  44.                 const db = e.target.result
  45.                 if (!db.objectStoreNames.contains(this.#tableDadaName)) {
  46.                     db.createObjectStore(this.#tableDadaName, { keyPath: 'serial',autoIncrement:false })
  47.                     db.createObjectStore(this.#tableInfoName, { keyPath: 'primary',autoIncrement:false })
  48.                 }
  49.             }
  50.             request.onsuccess = e => {
  51.                 this.#db = e.target.result
  52.                 resolve()
  53.             }
  54.         })
  56.     }
  58.     #getFileSize(){
  59.         return   new Promise((resolve,reject)=>{
  60.             let ref=this;
  61.             var xhr = new XMLHttpRequest();
  62.             //同步
  63.             xhr.open("GET", this.#fileSizeUrl+"/"+this.#fileName,false)
  64.             xhr.send()
  65.             if (xhr.readyState === 4 && xhr.status === 200) {
  66.                 let ret = JSON.parse(xhr.response)
  67.                 if (ret.code === 20000) {
  68.                     ref.#fileSiez=ret.data
  69.                 }
  70.                 resolve()
  71.             }
  72.         })
  73.     }
  75.     #getTransactionDadaStore(){
  76.         let transaction =  this.#db.transaction([this.#tableDadaName], 'readwrite')
  77.         let store = transaction.objectStore(this.#tableDadaName)
  78.         return store;
  79.     }
  80.     #getTransactionInfoStore(){
  81.         let transaction =  this.#db.transaction([this.#tableInfoName], 'readwrite')
  82.         let store = transaction.objectStore(this.#tableInfoName)
  83.         return store;
  84.     }
  86.     #setBlob(begin,end,i,last){
  87.         return   new Promise((resolve,reject)=>{
  88.             var xhr = new XMLHttpRequest();
  89.             xhr.open("GET", this.#downloadUrl+"/"+this.#fileName+"/"+begin+"/"+end+"/"+last)
  90.             xhr.responseType="blob"   // 只支持异步,默认使用 text 作为默认值。
  91.             xhr.send()
  92.             xhr.onload = ()=> {
  93.                 if (xhr.status === 200) {
  94.                     let store= this.#getTransactionDadaStore()
  95.                     let obj={serial:i,blob:xhr.response}
  96.                     //添加分片到用户本地的库中
  97.                     store.add(obj)
  98.                     let store2= this.#getTransactionInfoStore()
  99.                     //记录下载了多少个分片了
  100.                     store2.put({primary:"count",count:i})
  102.                     //调整进度条
  103.                     let percent1=   Math.ceil( (i/this.#fIleReadCount)*100)
  104.                     if(this.#percent<percent1){
  105.                         this.#percent=percent1;
  106.                     }
  107.                     this.#dynamicProgress()
  108.                     resolve()
  110.                 }
  111.             }
  112.         })
  114.     }
  116.     #mergeCallback(){
  117.         // 读取全部字节到blob里,处理合并
  118.         let arrayBlobs = [];
  119.         let store1 = this.#getTransactionDadaStore()
  120.         //按顺序找到全部的分片
  121.         for (let i = 0; i <this.#fIleReadCount; i++) {
  122.            let result= store1.get(IDBKeyRange.only(i))
  123.             result.onsuccess=(data)=>{
  124.                 arrayBlobs.push(data.target.result.blob)
  126.             }
  127.         }
  128.         //分片合并下载
  129.        this.#mergeInterval= setInterval(()=> {
  130.            if(arrayBlobs.length===this.#fIleReadCount){
  131.                clearInterval(this.#mergeInterval);
  132.                    //多个Blob进行合并
  133.                    let fileBlob = new Blob(arrayBlobs);//合并后的数组转成⼀个Blob对象。
  134.                    BlobUtls.downloadFileByBlob(fileBlob,this.#fileName)
  136.                //下载完毕后清除数据
  137.                 this. #clear()
  138.            }
  140.         },200)
  141.     }
  142.     #clear(){
  143.         let store2 = this.#getTransactionDadaStore()
  144.         let store3 = this.#getTransactionInfoStore()
  145.         store2.clear() //清除本地全下载的数据
  146.         store3.delete("count")//记录清除
  147.         this.#fIleStartReadCount=0 //起始位置
  148.         this.#db=null;
  149.         this.#fileName=null;
  150.         this.#fileSiez=0;
  151.         this.#fIleReadCount=0 //文件读取次数
  152.         this.#fIleStartReadCount=0//文件起始的位置
  154.     }
  156.     //检测是否有分片在本地
  157.     #checkSliceDoesIsExist(){
  158.         return   new Promise((resolve,reject)=>{
  159.             let store1 = this.#getTransactionInfoStore()
  160.             let result= store1.get(IDBKeyRange.only("count"))
  161.             result.onsuccess=(data)=>{
  162.                 let count= data.target.result?.count
  163.                 if(count){
  164.                     //防止因为网络的原因导致分片损坏,所以不要最后一个分片
  165.                     this.#fIleStartReadCount=count-1;
  166.                 }
  167.                 resolve();
  168.             }
  169.         })
  171.     }
  173.     /**
  174.      *  样式可以进行修改
  175.      * @param {*} progressId   需要将进度条添加到那个元素下面
  176.      */
  177.     addProgress (progressSelect) {
  178.         let bar = document.createElement("div")
  179.         bar.setAttribute("id", this.#barId);
  180.         let num = document.createElement("div")
  181.         num.setAttribute("id", this.#progressId);
  182.         num.innerText = "0%"
  183.         bar.appendChild(num);
  184.         document.querySelector(progressSelect).appendChild(bar)
  185.     }
  186.     #dynamicProgress(){
  187.         //调整进度
  188.         let bar = document.getElementById(this.#barId)
  189.         let progressEl = document.getElementById(this.#progressId)
  190.         bar.style.width = this.#percent + '%';
  191.         bar.style.backgroundColor = 'red';
  192.         progressEl.innerHTML =  this.#percent + '%'
  193.     }
  195.     stop(){
  196.         this.#stop=true;
  197.     }
  199.    startDownload(fileName){
  200.         //同步代码块
  201.         ;(async ()=>{
  202.                  //初始化
  203.                await this.#init(fileName)
  205.                    //自动调整分片,如果本地以下载了那么从上一次继续下载
  206.                await    this.#checkSliceDoesIsExist()
  207.                      //拿到文件的大小
  208.                await    this.#getFileSize()
  209.                    let begin=0; //开始读取的字节
  210.                    let end=this.#m1; // 结束读取的字节
  211.                    let last=false; //是否是最后一次读取
  212.                    this.#fIleReadCount= Math.ceil( this.#fileSiez/this.#m1)
  213.                    for (let i =  this.#fIleStartReadCount; i < this.#fIleReadCount; i++) {
  214.                        if(this.#stop){
  215.                             return
  216.                        }
  217.                        begin=i*this.#m1;
  218.                        end=begin+this.#m1
  219.                        if(i===this.#fIleReadCount-1){
  220.                            last=true;
  221.                        }
  222.                        //添加分片
  223.                        await  this.#setBlob(begin,end,i,last)
  224.                    }
  226.                    //定时检测存下载的分片数量是否够了
  227.                    this.#checkDownloadInterval= setInterval(()=> {
  228.                        let store = this.#getTransactionDadaStore()
  229.                        let result = store.count()
  230.                        result.onsuccess = (data) => {
  231.                            if (data.target.result === this.#fIleReadCount) {
  232.                                clearInterval(this.#checkDownloadInterval);
  233.                                //如果分片够了那么进行合并下载
  234.                                this.#mergeCallback()
  235.                            }
  236.                        }
  237.                    },200)
  239.        })()
  243.    }
  245. }
  247. export default FileSliceDownload;

后端代码

  1. package com.controller.commontools.fileDownload;
  3. import com.application.Result;
  4. import com.container.ArrayByteUtil;
  5. import com.file.FileWebDownLoad;
  6. import com.file.ReadWriteFileUtils;
  7. import com.path.ResourceFileUtil;
  8. import org.springframework.web.bind.annotation.*;
  10. import javax.servlet.http.HttpServletResponse;
  11. import java.io.BufferedOutputStream;
  12. import java.io.File;
  13. import java.io.OutputStream;
  14. import java.net.URLEncoder;
  16. @RestController
  17. @RequestMapping("/fileslice")
  18. public class FIleSliceDownloadController {
  19.     private  final  String uploaddir="uploads"+ File.separator+"real"+File.separator;//实际文件目录
  20.     // 获取文件的大小
  21.     @GetMapping("/fIleSliceDownloadSize/{fileName}")
  22.     public Result getFIleSliceDownloadSize(@PathVariable String fileName){
  23.         String absoluteFilePath = ResourceFileUtil.getAbsoluteFilePathAndCreate(uploaddir)+File.separator+fileName;
  24.          File file= new File(absoluteFilePath);
  25.         if(file.exists()&&file.isFile()){
  26.             return  Result.Ok(file.length(),Long.class);
  27.         }
  29.         return  Result.Error();
  30.     }
  32.     /**
  33.      * 分段下载文件
  34.      * @param fileName  文件名称
  35.      * @param begin  从文件什么位置开始读取
  36.      * @param end  到什么位置结束
  37.      * @param last  是否是最后一次读取
  38.      * @param response
  39.      */
  40.     @GetMapping("/dwnloadsFIleSlice/{fileName}/{begin}/{end}/{last}")
  41.     public void dwnloadsFIleSlice(@PathVariable String fileName, @PathVariable long begin, @PathVariable long end, @PathVariable boolean last, HttpServletResponse response){
  42.         String absoluteFilePath = ResourceFileUtil.getAbsoluteFilePathAndCreate(uploaddir)+File.separator+fileName;
  43.         File file= new File(absoluteFilePath);
  44.         try(OutputStream toClient = new BufferedOutputStream(response.getOutputStream())) {
  45.             long readSize = end - begin;
  46.             //读取文件的指定字节
  47.             byte[] bytes =  new byte[(int)readSize];
  48.             ReadWriteFileUtils.randomAccessFileRead(file.getAbsolutePath(),(int)begin,bytes);
  49.             if(readSize<=file.length()||last){
  50.                 bytes=ArrayByteUtil.getActualBytes(bytes); //去掉多余的
  51.             }
  53.             response.setContentType("application/octet-stream");
  54.             response.addHeader("Content-Length", String.valueOf(bytes.length));
  55.             response.setHeader("Content-Disposition", "attachment;filename*=UTF-8''" + URLEncoder.encode(fileName, "UTF-8"));
  56.             toClient.write(bytes);
  58.         } catch (Exception e) {
  59.             e.printStackTrace();
  60.         }
  61.     }
  63. }

点赞 -收藏-关注-便于以后复习和收到最新内容有其他问题在评论区讨论-或者私信我-收到会在第一时间回复如有侵权，请私信联系我感谢,配合,希望我的努力对你有帮助^_^

版权说明 : 本文为转载文章, 版权归原作者所有 版权申明

原文链接 : https://blog.csdn.net/weixin_45203607/article/details/124998112

内容来源于网络，如有侵权，请联系作者删除！

JavaJavaScript前端

相关文章

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新文章

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com