先上效果图
初始界面
选择文件
点击下载
大致思路
- 上传文件
使用input type中的file - 显示markdown文件内容
使用FileReader对象提取，用innerHTML显示 - 转换并显示html
使用replace()转换，再用innerHTML显示转换内容 - 下载到本地
转换成blob地址，生成链接，给按钮加点击事件
部分代码来源
http://www.zhangxinxu.com/wordpress/2017/07/js-text-string-download-as-html-json-file/
此方法中文会出现乱码
上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page Title</title>
<style>
#file{
border: 1px solid black;
padding: 2px;
position: absolute;
top: 250px;
left:43%;
}
#download{
position: absolute;
top: 350px;
left:43%;
}
#read{
border: 1px solid black;
position: absolute;
top: 20px;
left: 20px;
width: 40%;
height: 700px;
overflow: scroll;
}
#finish{
border: 1px solid black;
position: absolute;
top: 20px;
right: 20px;
width: 40%;
height: 700px;
overflow: scroll;
}
</style>
</head>
<body>
<input type="file" id="file" onchange="change()">
<input type = "button" id = "download" value = "下载html" href = "">
<div id = "read">
</div>
<div id = "finish">
</div>
<script>
var read = document.getElementById("read");
var file = document.getElementById("file");
var oChange = document.getElementById("change");
var oFinish = document.getElementById("finish");
var oDownload = document.getElementById("download");
var funDownload = function (content, filename) {
// 创建隐藏的可下载链接
var eleLink = document.createElement('a');
eleLink.download = filename;
eleLink.style.display = 'none';
// 字符内容转变成blob地址
var blob = new Blob([content]);
eleLink.href = URL.createObjectURL(blob);
// 触发点击
document.body.appendChild(eleLink);
eleLink.click();
// 然后移除
document.body.removeChild(eleLink);
}
function change(){
var reader = new FileReader();
reader.readAsText(file.files[0]);
reader.onload = function(){
read.innerHTML=this.result;
var change1 = this.result.replace(/\!(\[.*\])\((.+)\)/g, "<img src=\"" + "$2" + "\" />");
var change2 = change1.replace(/\[(.*)\]\((.+)\)/g, "<a href=\"" + "$2" + " \" >" + "$1" + "<a />");
finish.innerHTML = change2;
download.onclick = function () {
funDownload(finish.innerHTML, 'test.html');
}
}
}
</script>
</body>
</html>
