js代码块下载功能源码分享

代码块下载功能

预览地址：js代码块下载功能源码分享

网站改版，琢磨着想加个代码段下载的功能，然后找了一下，最后在大神张鑫旭的博客找到了这个功能，然后自己改装了一下用到了博客上，这里把改装后的源码贴出来记录一下。

HTML代码

无关紧要的东西，根据自己需求来定就ok...

<pre class="daima">
[deta-title]:hover:after{
    visibility: visible;
}
</pre>
<pre class="daima">&lt;a href=&quot;#&quot; title=&quot;漠白 · GitLab&quot; deta-title&gt;GitLab&lt;/a&gt;</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;
}

至关重要的JavaScript

自己对.daima做了个遍历，然后添加了一个按钮.dow_but。功能的核心代码是funDownload函数。

var code = document.querySelectorAll(".daima");
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);
};
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('浏览器不支持');
        };
    }
}