先上效果圖
初始界面
選擇文件
點擊下載
選擇文件
點擊下載
大致思路
- 上傳文件
使用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>