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完事!

相关推荐
拉不动的猪2 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪2 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
uhakadotcom3 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom3 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom4 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom4 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
咖啡教室5 小时前
前端开发日常工作每日记录笔记(2019至2024合集)
前端·javascript
咖啡教室5 小时前
前端开发中JavaScript、HTML、CSS常见避坑问题
前端·javascript·css
市民中心的蟋蟀8 小时前
第五章 使用Context和订阅来共享组件状态
前端·javascript·react.js
逆袭的小黄鸭8 小时前
JavaScript 闭包:强大特性背后的概念、应用与内存考量
前端·javascript·面试