| JavaScript处理后端返回PDF文件流，在线预览下载PDF文件 | 您所在的位置：网站首页 › js接收文件流 › JavaScript处理后端返回PDF文件流，在线预览下载PDF文件 |
JavaScript处理后端返回PDF文件流，在线预览下载PDF文件
|
在实际开发业务中，遇到这一需求，即后端返回的pdf文件，是以base64文件流的方式，在此不便操作接口响应等操作，便以上传一个文件转化为文件流的形式模拟 实际应用时，base64Img = res.data 即可，以下方法为不使用其他插件可快速实现文件流转pdf，在线预览和下载，如需pdf文件流转图片预览且不可下载 请参考此篇随笔 pdf.js文件流转图片 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) } }下图为处理IE兼容效果：
|
【本文地址】
公司简介
联系我们