在实际开发业务中,遇到这一需求,即后端返回的pdf文件,是以base64文件流的方式,在此不便操作接口响应等操作,便以上传一个文件转化为文件流的形式模拟
实际应用时,base64Img = res.data 即可,以下方法为不使用其他插件可快速实现文件流转pdf,在线预览和下载,如需pdf文件流转图片预览且不可下载
请参考此篇随笔 pdf.js文件流转图片
<%input type="file" name="" id="imgfile">
<script>
var base64Img = ''; // 响应数据
document.getElementById('imgfile').onchange = function () {
var fileReader = new FileReader();
fileReader.readAsDataURL(this.files[0]);
fileReader.onload = function () {
base64Img = fileReader.result;
showAgreementBook(base64Img)
}
}
// base64文件流转为blob
function dataURItoBlob(base64Data) {
var byteString;
if (base64Data.split(',')[0].indexOf('base64') >= 0)
byteString = atob(base64Data.split(',')[1]); //base64 解码
else {
byteString = unescape(base64Data.split(',')[1]);
}
var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
var ia = new Uint8Array(byteString.length); //创建视图
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
var blob = new Blob([ia], {
type: mimeString
});
return blob;
}
function showAgreementBook(data) {
var blob = dataURItoBlob(data)
// for IE 兼容IE,弹出用户操作框,用户可自行选择下载或打开
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(blob);
} else {
let fileURL = URL.createObjectURL(blob)
// 会生成类似 blob:XXX/XXXXX-XXXXX-XXXXX-XXXXX-526fc462d662 地址,并在新标签页打开,可下载
window.open(fileURL)
}
}
</script>
下图为处理IE兼容效果: