iframe展示pdf、png、jpg：
1、前端定义div：
<div id="pdf-container"></div>/*dpf的div*/
<iframe id="imageFrame"></iframe>/*图片的div*/
2、后端查询base64的流，前端页面初始化js方法：(pdf和图片，2个方法)
/*pdf展示*/
function pdfToShow(){
// 这里的 base64Data 是你的 base64 编码的 PDF 数据
var base64Data =$("#fileBase64").val()
console.log("base64Data",base64Data)
const byteCharacters = atob(base64Data);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
const blob = new Blob([byteArray], {
type: 'application/pdf' });
// 创建一个新的 URL，并设置文件名
const url = URL.createObjectURL(blob);
var pdfContainer = document.getElementById("pdf-container");
const iframe = document.createElement('iframe');
iframe.src = url;
// 修改文件名（这部分实现可能因浏览器而异）
iframe.setAttribute('download', 'your_desired_filename.pdf');
// 将 iframe 添加到文档中显示
pdfContainer.appendChild(iframe);
}
/*图片展示*/
/*根据imageType 判断图片类型*/
function picToShow(){
var base64Image =$("#fileBase64").val();
var iframe = document.getElementById("imageFrame");
//var imageType = "image/png"; // 或者 "image/jpeg"
var imageType = (fileType=="jpg"? "image/jpg":"image/png");
// 将Base64编码的图片数据转换为二进制格式
var binaryImage = atob(base64Image);
var byteArray = [];
for (var i = 0; i < binaryImage.length; i++) {
byteArray.push(binaryImage.charCodeAt(i));
}
// 设置iframe的src属性为二进制图片数据
iframe.src = "data:" + imageType + ";base64," + btoa(String.fromCharCode.apply(null, byteArray));
}
3、调整下一般般的样式，自己看着搞：
<style>
#pdf-container {
width: 100%; /* 设置div的宽度为100% */
height: 710px; /* 设置div的高度为100% */
}
iframe {
width: 100%; /* 设置iframe的宽度为100% */
height: 100%; /* 设置iframe的高度为100% */
}
#imageFrame{
width: 100%; /* 设置div的宽度为100% */
height: 710px; /* 设置div的高度为100% */
}
</style>
4、效果展示：
程序猿需要熟玩流？不存在的，cv完事！
