想把自己写的一份问题总结文档转成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>