摘要：背景在項(xiàng)目中發(fā)現(xiàn)，文件下載時(shí)有可能出現(xiàn)文件不完全導(dǎo)致的文件無(wú)法打開(kāi)的情況，考慮在后臺(tái)響應(yīng)中加入文件，與前臺(tái)取得文件后生成的值作一次校驗(yàn)，來(lái)判斷文件是否正確下載。

在項(xiàng)目中發(fā)現(xiàn)，文件下載時(shí)有可能出現(xiàn)文件不完全導(dǎo)致的文件無(wú)法打開(kāi)的情況，考慮在后臺(tái)響應(yīng)中加入文件MD5，與前臺(tái)取得文件后生成的MD5值作一次校驗(yàn)，來(lái)判斷文件是否正確下載。

此功能的難點(diǎn)是如何在response中加入MD5值。原文件下載接口中使用的是HttpServletResponse，然后在前臺(tái)使用a標(biāo)簽的點(diǎn)擊事件來(lái)實(shí)現(xiàn)，在開(kāi)發(fā)過(guò)程中，首先想到的是在response的headers中加入MD5信息，然后在前臺(tái)想辦法取到，即

...
// response.setHeader("md5",md5sum(bytes));
...

private String md5sum(byte[] bytes){
    ...
}

在實(shí)際開(kāi)發(fā)中發(fā)現(xiàn)，這個(gè)方法無(wú)法正常下載文件，所以應(yīng)該通過(guò)其他途徑來(lái)實(shí)現(xiàn)。（這種想法還是很天真的2333）

之前的開(kāi)發(fā)中有用到Blob對(duì)象，在前臺(tái)中可以使用Blob對(duì)象來(lái)實(shí)現(xiàn)文件下載，即

...
var url = window.URL.createObjectURL(blob);
var a = document.createElement("a");
a.href = url;
a.download = filename;
a.click();
...

那么肯定可以在后臺(tái)接口中加上文件的bytearray，再在JS中使用var blob = new Blob([bytearray]);來(lái)聲明一個(gè)blob對(duì)象實(shí)現(xiàn)文件下載，那么也可以在返回的JSON中加入生成的MD5值了。

后臺(tái)

import org.apache.commons.io.IOUtils;
import java.util.HashMap;
import java.util.Map;
import java.io.*;
import java.security.MessageDigest;
...
    private final char HEX_DIGITS[] = {"0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"};
    ...
    @Override
    public Object downloadFile(String burketName, String fileName){
        try {
            InputStream is = ...;
            byte[] byteArray = IOUtils.toByteArray(is);
            String fileMD5 = md5sum(byteArray);
            Map map = new HashMap();
            map.put("file",byteArray);
            map.put("md5",fileMD5.toUpperCase());

            if(is!=null){
                is.close();
            }
            return map;
        }catch (Exception ex){
            ex.printStackTrace();
        }
        return "";
    }

    private String toHexString(byte[] b) {
        StringBuilder sb = new StringBuilder(b.length * 2);
        for (int i = 0; i < b.length; i++) {
            sb.append(HEX_DIGITS[(b[i] & 0xf0) >>> 4]);
            sb.append(HEX_DIGITS[b[i] & 0x0f]);
        }
        return sb.toString();
    }

    private String md5sum(byte[] byteArray) {
        InputStream is = new ByteArrayInputStream(byteArray);
        byte[] buffer = new byte[1024];
        int numRead = 0;
        MessageDigest md5;
        try{
            md5 = MessageDigest.getInstance("MD5");
            while((numRead=is.read(buffer)) > 0) {
                md5.update(buffer,0,numRead);
            }
            return toHexString(md5.digest());
        } catch (Exception e) {
            System.out.println("parse md5 error");
            return null;
        }
    }
...

前臺(tái)

...
// 前臺(tái)在生成MD5時(shí)使用了SparkMD5插件
fetch(url, {headers:headers).then(function (res) {
    return res.json();
}).then(function (blob) {
    var spark = new SparkMD5.ArrayBuffer();
    //這個(gè)是接口中返回的MD5
    var serverMD5=blob.md5;
    var byteBuffer=_base64ToArrayBuffer(blob.file);
    spark.append(byteBuffer);
    var clientMD5 = spark.end().toUpperCase();
    // 判斷文件是否下載完全
    if(serverMD5 === clientMD5){
        var f = new Blob([byteBuffer]);
        var url = window.URL.createObjectURL(f);
        var a = document.createElement("a");
        a.href = url;
        a.download =filename;
        a.click();
        window.URL.revokeObjectURL(f);
    }
    else{
        console.log("文件下載時(shí)出錯(cuò)，請(qǐng)重新下載");
    }
});

function _base64ToArrayBuffer (base64) {
    var binary_string =  window.atob(base64);
    var len = binary_string.length;
    var bytes = new Uint8Array(len);
    for (var i=0;i
總結(jié)
以上就是在開(kāi)發(fā)文件下載校驗(yàn)時(shí)的思路和代碼分享，開(kāi)發(fā)的關(guān)鍵就是在文件下載接口返回值中加入后臺(tái)計(jì)算的文件MD5，主要就是通過(guò)后臺(tái)接口中返回文件的bytearray和用作校驗(yàn)的MD5值，前臺(tái)接收到接口返回后生成一個(gè)MD5來(lái)與接口返回的MD5作校驗(yàn)，再在前臺(tái)中使用返回的bytearray，通過(guò)Blob來(lái)實(shí)現(xiàn)文件下載。
如果你還有更好的方案，歡迎給我留言，不勝感激。
傳送門(mén)

Blob: Blob
SparkMD5: SparkMD5