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 函数
开发语言·前端·javascript·ecmascript·web
仰望星空的凡人3 小时前
【JS逆向基础】数据库之MongoDB
javascript·数据库·python·mongodb
樱花开了几轉4 小时前
React中为甚么强调props的不可变性
前端·javascript·react.js
Mr...Gan5 小时前
VUE3(四)、组件通信
前端·javascript·vue.js
楚轩努力变强6 小时前
前端工程化常见问题总结
开发语言·前端·javascript·vue.js·visual studio code
前端开发爱好者7 小时前
只有 7 KB!前端圈疯传的 Vue3 转场动效神库!效果炸裂!
前端·javascript·vue.js
Fly-ping7 小时前
【前端】JavaScript文件压缩指南
开发语言·前端·javascript
接口写好了吗8 小时前
【el-table滚动事件】el-table表格滚动时,获取可视窗口内的行数据
javascript·vue.js·elementui·可视窗口滚动
未来之窗软件服务8 小时前
免费版酒店押金原路退回系统之【房费押金计算器】实践——仙盟创梦IDE
前端·javascript·css·仙盟创梦ide·东方仙盟·酒店押金系统
mixiumixiu9 小时前
免费 PDF 转 Word 工具:无水印 / 支持批量转换,本地运行更安全【附工具下载】
pdf