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

相关推荐
像风一样自由202014 分钟前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
浪裡遊1 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
Liudef063 小时前
2048小游戏实现
javascript·css·css3
独立开阀者_FwtCoder5 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
我想说一句5 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
汤姆Tom5 小时前
JavaScript reduce()函数详解
javascript
小飞悟5 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子5 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
蓝翔认证10级掘手6 小时前
🤯 家人们谁懂啊!我的摸鱼脚本它...它成精了!🚀
javascript
前端康师傅6 小时前
JavaScript 中你不知道的按位运算
前端·javascript