FileSaver.js下载文件简单demo

最新推荐文章于 2024-06-14 23:03:44 发布

不善言谈者

最新推荐文章于 2024-06-14 23:03:44 发布

阅读量6.5k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/bushanyantanzhe/article/details/106850265

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

想把自己写的一份问题总结文档转成html好查看,还能进行增加操作,不想通过后端的io流,于是上网查了下,发现FileSaver.js可以实现前端的下载操作,于是就写了一个简单的demo

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="js/wt.js"></script>
		<script type="text/javascript" src="js/FileSaver.js"></script>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<script>
			$(function() {
				var html = "";
				for(var i = 0; i < wt.length; i++) {
					var data = wt[i];
					html += "<div class=\"row \"><div class=\"col-md-1 td\">" + (i + 1) + "</div><div class=\"col-md-11 td\">" + data.desc + "</div></div>";
				}
				$("#bodydata").html(html)

			})

			function saveFileByzdy(value) {
				var addvalue = $("#addvalue").val();
				if(addvalue == "") return;
				var addvaluearr = addvalue.split(";");
				for(var i = 0; i < addvaluearr.length; i++) {
					wt.push({
						"desc": addvaluearr[i]
					});
				}

				var prolists = JSON.stringify(wt);
				prolists = "var wt=" + prolists;
				var file = new File([prolists], "wt.js", {
					type: "text/plain;charset=utf-8"
				});
				closeModal()
				saveAs(file);

			}

			function search() {
				var search = $("#search").val();
				var html = "";
				for(var i = 0; i < wt.length; i++) {
					var data = wt[i];
					var desc = data.desc;
					if(desc.indexOf(search) != -1) {
						html += "<div class=\"row \"><div class=\"col-md-1 td\">" + (i + 1) + "</div><div class=\"col-md-11 td\">" + data.desc + "</div></div>";
					}

				}
				$("#bodydata").html(html)
			}

			function setTextareaHeight() {
				$("textarea").each(function() {
					autoTextarea(this);
				})
			}

			var autoTextarea = function(elem, extra, maxHeight) {
				extra = extra || 0;
				var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,
					isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),
					addEvent = function(type, callback) {
						elem.addEventListener ?
							elem.addEventListener(type, callback, false) :
							elem.attachEvent('on' + type, callback);
					},
					getStyle = elem.currentStyle ? function(name) {
						var val = elem.currentStyle[name];
						if(name === 'height' && val.search(/px/i) !== 1) {
							var rect = elem.getBoundingClientRect();
							return rect.bottom - rect.top -
								parseFloat(getStyle('paddingTop')) -
								parseFloat(getStyle('paddingBottom')) + 'px';
						};
						return val;
					} : function(name) {
						return getComputedStyle(elem, null)[name];
					},
					minHeight = parseFloat(getStyle('height'));
				elem.style.resize = 'none';
				var change = function() {
					var scrollTop, height,
						padding = 0,
						style = elem.style;
					if(elem._length === elem.value.length) return;
					elem._length = elem.value.length;
					if(!isFirefox && !isOpera) {
						padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));
					};
					scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
					elem.style.height = minHeight + 'px';
					if(elem.scrollHeight > minHeight) {
						if(maxHeight && elem.scrollHeight > maxHeight) {
							height = maxHeight - padding;
							style.overflowY = 'auto';
						} else {
							height = elem.scrollHeight - padding;
							style.overflowY = 'hidden';
						};
						style.height = height + extra + 'px';
						scrollTop += parseInt(style.height) - elem.currHeight;
						document.body.scrollTop = scrollTop;
						document.documentElement.scrollTop = scrollTop;
						elem.currHeight = parseInt(style.height);
					};
				};
				addEvent('propertychange', change);
				addEvent('input', change);
				addEvent('focus', change);
				change();

			};

			function closeModal() {
				document.getElementById("div0502").style.display = "none";
			}

			function showModel() {
				$("#div0502").show();
				setTextareaHeight();
			}
		</script>
		<style>
			.td {
				border: 1px solid #000;
				height: 40px;
				text-align: center
			}
			
			textarea {
				outline: 0 none;
				border-color: rgba(82, 168, 236, 0.8);
				box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
			}
			
			.modal {
				background-color: rgba(0, 0, 0, .5)
			}
			
			.modal-content {
				margin: 0 auto;
			}
		</style>
	</head>

	<body>

		<div style="text-align:center">
			<h1>问题总结</h1></div>
		<br />
		<div style="text-align:center">搜索:<input id="search" style="width:300px" /><button onclick="search()"> 搜索</button> <button onclick="showModel()">添加</button></div>
		</div>
		

			<br />
			<div class="container">
				<div class="row box">
					<div class="col-md-1 td">序号</div>
					<div class="col-md-11 td"> 问题描述
					</div>

				</div>
			</div>
			<div class="container" id="bodydata">

			</div>

			<div>
				<!-- 反馈电源验收情况 -->
				<div id="div0502" class="modal" style="display:none;">
					<div class="modal-content" style="width:700px;top:300px">
						<div class="modal-header">
							<h4>请输入值</h4>
						</div>
						<div class="modal-body">
							<div></div>
							<div id="zjbDiv0502">
								<textarea id="addvalue" style="width:98%;height:100px"></textarea>
							</div>
						</div>
						<div class="modal-footer" style="text-align:center">
							<button onclick="saveFileByzdy()">确定</button>
							<button onclick="closeModal()">取消</button>
						</div>
					</div>
					<!-- /.modal-content -->
				</div>
			</div>
	</body>

</html>

不善言谈者

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
FileSaver.js下载文件简单demo

想把自己写的一份问题总结文档转成html好查看,还能进行增加操作,不想通过后端的io流,于是上网查了下,发现FileSaver.js可以实现前端的下载操作,于是就写了一个简单的demo<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3
复制链接

扫一扫