JavaScript处理后端返回PDF文件流，在线预览下载PDF文件
<p><strong>在实际开发业务中，遇到这一需求，即后端返回的pdf文件，是以base64文件流的方式，在此不便操作接口响应等操作，便以上传一个文件转化为文件流的形式模拟<br>实际应用时，<em>base64Img = res.data</em> 即可，以下方法为不使用其他插件可快速实现文件流转pdf，在线预览和下载，如需pdf文件流转图片预览且不可下载<br>
请参考此篇随笔 pdf.js文件流转图片</strong></p>
<pre><code><%input type="file" name="" id="imgfile">
<script>
var base64Img = ''; // 响应数据
document.getElementById('imgfile').onchange = function () {
var fileReader = new FileReader();
fileReader.readAsDataURL(this.files);
fileReader.onload = function () {
base64Img = fileReader.result;
showAgreementBook(base64Img)
}
}
// base64文件流转为blob
function dataURItoBlob(base64Data) {
var byteString;
if (base64Data.split(',').indexOf('base64') >= 0)
byteString = atob(base64Data.split(',')); //base64 解码
else {
byteString = unescape(base64Data.split(','));
}
var mimeString = base64Data.split(',').split(':').split(';');
var ia = new Uint8Array(byteString.length); //创建视图
for (var i = 0; i < byteString.length; i++) {
ia = byteString.charCodeAt(i);
}
var blob = new Blob(, {
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>
</code></pre>
<blockquote>
<p>下图为处理IE兼容效果：</p>
</blockquote>
<p><img src="https://img2020.cnblogs.com/blog/1238759/202007/1238759-20200720142525841-752080386.jpg" alt="" loading="lazy"></p><br><br>
来源：https://www.cnblogs.com/echoyya/p/13344706.html
頁:
[1]