前端通過ajax獲取base64轉blob下載PDF方法

我們通常下載文件的方式無非后端給一個生成文件鏈接, 前端通過a標簽或者iframe的方式去下載,這種方式的弊端是無法監測到文件是否下載完成,無法給用戶友好的提示,以避免用戶短時間內重復點擊下載.

如果我們能用Ajax從后端拿到PDF的相關數據,再在前端下載成PDF就可以解決這個問題,那么新的問題是:

1. 前端如何下載PDF?

2. 后端給什么格式的數據?

針對第一個問題很簡單:將通過URL.createObjectURL()函數將blob對象生成url,並添加到a標簽上即可解決.

問題轉化成后端給什么格式數據我們通過ajax請求獲取之后可以轉化成blob? base64是一個可行的方案.

具體解決方案如下:

1. 將base64轉化成blob方法

function convertBase64ToBlob(base64, fileType, slice) {
    return new Blob(atob(base64)
    .match(new RegExp(`([\\s\\S]{${slice}})|([\\s\\S]{1,${slice}})`, 'g'))
    .map(function(item){
        return new Uint8Array(item.split('').map(function(s, i) {
            return item.charCodeAt(i)
        }))
    }), {type: fileType})
}

 2. 前端下載PDF

const blob = convertBase64ToBlob(data, 'application/pdf', 1024)
if (navigator.msSaveBlob) {
    return navigator.msSaveBlob(blob, '1.pdf');
}
const urlFromBlob = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.style.display = 'none';
a.href = urlFromBlob;
a.download = '1.pdf';
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(urlFromBlob);
document.body.removeChild(a)

over !