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 分钟前
Vue2 doc、excel、pdf、ppt、txt、图片以及视频等在线预览
pdf·powerpoint·excel·文件在线预览
熊的猫31 分钟前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
别拿曾经看以后~2 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
川石课堂软件测试2 小时前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
JerryXZR2 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
problc3 小时前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter
Gavin_9153 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼4 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
待磨的钝刨5 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
前端青山10 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js