前端预览base64图片或PDF

目前有不少程序员喜欢将文件转为base64存储至数据，这样便于下载以及数据之间的对应，但是偶尔也会遇到预览管理的功能，因此需要在前端进行转化以及展示。

方式一： 通过img标签或者iframe标签的src进行输出

<img class="img" src="data:image/jpeg;base64,{base64}" >

但是这种方式有弊端，当文件过大的时候往往会输出失败，因此这种方式适用于小文件进行预览。

方式二： 通过Blob对象进行输出(推荐)

//判断base64文件类型
function base64FileHeaderMapper(fileBase64) {

    let fileHeader = new Map();

    //获取不同文件的文件头前3个字作为判断依据
    fileHeader.set("/9j", "jpeg")
    fileHeader.set("iVB", "png")
    // fileHeader.set("Qk0", "BMP")
    // fileHeader.set("SUk", "TIFF")
    fileHeader.set("JVB", "pdf")
    // fileHeader.set("UEs", "OFD")

    let res = ""

    //遍历map中所提及的文件头特征
    fileHeader.forEach((v, k) => {
        if (k == fileBase64.substr(0, 3)) {
            res = v
        }
    })

    //如果不在map中返回unknown file
    if (res == "") {
        res = "unknown file"
    }

    //否则返回map中的value值
    return res;
}



//将base64转为Bolb
function base64ToBlob(code, type) {
    code = code.replace(/[\n\r]/g, '');

    var raw = window.atob(code);

    var rawLength = raw.length;

    var uint8Array = new Uint8Array(rawLength);


    for (let i = 0; i < rawLength; i++) {
        uint8Array[i] = raw.charCodeAt(i);
    }

    if ('pdf' === type) {

        return new Blob([uint8Array], {type: 'application/pdf'})

    } else {
        return new Blob([uint8Array], {type: 'image/jpeg'})

    }


}


//使用方式

var s = base64FileHeaderMapper(arr[i]);

var blob = base64ToBlob(arr[i], s);

var fileURL = URL.createObjectURL(blob);



最后依然是使用img标签进行输出

<img class="img" src= '+fileURL+' >