iframe展示pdf、png、jpg

iframe展示pdf、png、jpg:

1、前端定义div:

bash 复制代码
<div id="pdf-container"></div>/*dpf的div*/
<iframe id="imageFrame"></iframe>/*图片的div*/

2、后端查询base64的流,前端页面初始化js方法:(pdf和图片,2个方法)

bash 复制代码
/*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、调整下一般般的样式,自己看着搞:

bash 复制代码
	<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完事!

相关推荐
拉不动的猪1 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
烛阴2 小时前
Node.js中必备的中间件大全:提升性能、安全与开发效率的秘密武器
javascript·后端·express
小杨升级打怪中2 小时前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
鱼樱前端3 小时前
前端必知必会:JavaScript 对象与数组克隆的 7 种姿势,从浅入深一网打尽!
前端·javascript
开开心心_Every3 小时前
体积小巧的 Word 转 PDF 批量工具
pdf
一眼青苔3 小时前
切割PDF使用python,库PyPDF2
服务器·python·pdf
yzhSWJ3 小时前
Spring Boot中自定义404异常处理问题学习笔记
java·javascript
zyk_5205 小时前
前端渲染pdf文件解决方案-pdf.js
前端·javascript·pdf
沉迷...5 小时前
手动实现legend 与 echarts图交互 通过js事件实现图标某项的高亮 显示与隐藏
前端·javascript·echarts
皮实的芒果6 小时前
前端实时通信方案对比:WebSocket vs SSE vs setInterval 轮询
前端·javascript·性能优化