前端下载、预览文件图片等功能

一、下载

我们可以通过window.URL.createObjectURL，接收一个Blob（File）对象，将其转化为Blob URL,然后赋给 a.download属性，然后在页面上点击这个链接就可以实现下载了 Blob对象：
Blob（Binary Large Object）二进制类型的大对象，其名称来源于SQL数据库，表示一个不可变、原始数据的类文件对象；
在JavaScript中，它不一定非得是大量数据，其也可以表示一个小型文本文件的内容；
Blob是不透明的，只能获取它们的大小、MIME类型以及将它们分割成更小的Blob； 构造函数：
Blob(blobParts [, options])：返回一个Blob对象，其内容由参数中给定的数组串联组成；
参数：
blobParts是一个由ArrayBuffer、ArrayBufferView、Blob、String等对象构成的Array，或者其他类似对象的混合体，它将会被放入Blob；其中，Strings会被编码为UTF-8；
options是一个可选的BlobPropertyBag（[bɡ]）字典，它可能会指定如下两个属性：

• type，默认值为 ""，它代表了将会被放入到blob中的数组内容的MIME类型；
• endings，默认值为"transparent"，用于指定包含行结束符\n的字符串如何被写入，它是以下两个值中的一个："native"，代表行结束符会被更改为适合宿主操作系统文件系统的换行符，或者 "transparent"，代表会保持blob中保存的结束符不变；

// res一般是接口返回的数据，fun为文件类型如：png、word等
function downloadFile(res, fun) {
    // Blob() 构造函数返回一个新的 Blob 对象。blob 的内容由参数数组中给出的值的串联组成。
    const blob = new Blob([res.data], {
        // header 中Content-type的种类:word为application/msword
        type: `application/${fun}`
    })
    // 将blob转成url
    const url=URL.createObjectURL(blob)
    /*
     * 将blob转化为file
    */
    const file = new File([blob], fileName, {
        type: `application/${fun}`,
        lastModified: Date.now()
    });
        
    const a = doucment.createElement('a')
    // 下载文件名字，window.decodeURIComponent对encodeURIComponent() 函数编码的 URI 进行解码。
    const fileName = window.decodeURIComponent(res.header['content-disposition'].splite('=')[1])
    a.herf = url
    a.setAttribute('download', fileName)
    document.body.appendChild(a)
    a.click()
    // 移除a链接
    document.body.removeChild(a)
}

二、预览图片

// res一般是接口返回的数据，fun为文件类型如：png、jpg等，这里不能预览word、pdf等
function preview(res, fun) {
    // Blob() 构造函数返回一个新的 Blob 对象。blob 的内容由参数数组中给出的值的串联组成。
    const blob = new Blob([res.data], {
        // header 中Content-type的种类:word为application/msword
        type: `application/${fun}`
    })
    const url=URL.createObjectURL(blob)
    if(fun === 'png' || fun === 'jpg') {
        const waterMarkBgc = addWaterMark()
        const html = `
        <img src="${url}" style="position: relative;" />
        <div style="
           width: 100%;
           height: 100%;
           position: absolute;
           top: 0;
           left: 0;
           z-index: 999;
           backgroung-image: url(${url})
        "
        </div>
        `
        const newWindow = window.open('','_blank','')
        newWindow.document.write(html)
        newWindow.document.title = ''
    } else {
        alert('只能预览图片类型！')
    }
}

// 添加水印
function addWaterMark() {
    const waterStr = "水印文字"
    const ctx = document.createElement('canvas')
    ctx.width = 250
    ctx.height = 100
    ctx.style.display = 'none'
    const cans = ctx.getContent('2d')
    cans.rotate((-20 * Math.PI) / 180)
    cans.font = '12px Microsoft YaHei'
    cans.fillStyle = '#E9E9E9'
    cans.textAlign = 'left'
    cans.textBaseLine = 'middle'
    cans.fillText = (waterStr, 0, 100)
    cans.save()
    return ctx.toDataURL()
}