代碼塊下載功能
預(yù)覽地址：js代碼塊下載功能源碼分享
網(wǎng)站改版碰缔，琢磨著想加個代碼段下載的功能金抡，然后找了一下梗肝，最后在大神張鑫旭的博客找到了這個功能禀晓，然后自己改裝了一下用到了博客上匆绣，這里把改裝后的源碼貼出來記錄一下崎淳。
HTML代碼
無關(guān)緊要的東西，根據(jù)自己需求來定就ok...
<pre class="daima">
[deta-title]:hover:after{
visibility: visible;
}
</pre>
<pre class="daima"><a href="#" title="漠白 · GitLab" deta-title>GitLab</a></pre>
CSS代碼
因為博客沒加代碼高亮，所以就自己寫了一點css菊匿，隨便來嘍~
input{
border: none;
}
.daima {
display: block;
width: 500px;
margin: 30px auto;
padding: 14px;
background-color: #f8f8f8;
border-radius: 2px;
color: #d14;
border: 1px dashed #ddd;
word-wrap: break-word;
white-space: pre-wrap;
font-size: 0.8em;
overflow-y: auto;
position: relative;
}
.dow_but{
position: absolute;
top: 0;
right: 0;
padding: 6px 12px;
cursor: pointer;
background: #5cb85c;
color: #fff;
}
至關(guān)重要的JavaScript
自己對.daima做了個遍歷，然后添加了一個按鈕.dow_but佩厚。功能的核心代碼是funDownload函數(shù)抄瓦。
var code = document.querySelectorAll(".daima");
var funDownload = function (content, filename) {
var eleLink = document.createElement('a');
eleLink.download = filename;
eleLink.style.display = 'none';
// 字符內(nèi)容轉(zhuǎn)變成blob地址
var blob = new Blob([content]);
eleLink.href = URL.createObjectURL(blob);
// 觸發(fā)點擊
document.body.appendChild(eleLink);
eleLink.click();
// 然后移除
document.body.removeChild(eleLink);
};
for (var i=0;i<code.length;i++){
code[i].innerHTML += "<input type='button' value='下載本段代碼' class='dow_but'>";
var dowBut = document.querySelectorAll('.dow_but');
if ('download' in document.createElement('a')) {
// 作為UCode.html文件下載
dowBut[i].addEventListener('click', function () {
funDownload(this.parentNode.innerText, 'UCode.html');
});
} else {
dowBut.onclick = function () {
alert('瀏覽器不支持');
};
}
}
