記事に埋め込んだソースコードをダウンロードするボタンJavaScript(jQuery)

東都花暦 茗渓之蛍コンピュータ
出典:国立国会図書館「NDLイメージバンク」 (https://rnavi.ndl.go.jp/imagebank/)
ソースコードを記事に埋め込むため「Highlighting Code Block」というプラグイン使っています。このプラグインを使ったソースコードのダウンロードボタンをJavascriptで試作してみます。
スポンサーリンク

ソースコード

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <title>コードダウンロードボタン</title>
        <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
        <script>
            function codeDownload() {
                $('.prism').each(function(index, e) {
                    var filename = e.getAttribute('data-file');
                    var text = e.children[0].textContent;

                    var blob = new Blob([text], {type: "text/plain"});
                    var a = document.createElement("a");
                    a.href = URL.createObjectURL(blob);
                    a.target = '_blank';
                    a.download = filename;
                    a.click();
                });
            };
        </script>
        <style>
            .submitButton:hover {
                background-color: #7f7f7f;
                color: #ffffff;
            }
            .submitButton {
                padding: 8px;
                margin: 8px;
                border: 2px solid #000000;
                width: 120px;
                height: 48px;
                font-size: 24px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="hcb_wrap"><pre class="prism line-numbers lang-plain" data-file="hello.ps1" data-lang="Plain Text"><code>echo "Hello&lt;"</code></pre></div>
        <div class="hcb_wrap"><pre class="prism line-numbers lang-plain" data-file="hello2.ps1" data-lang="Plain Text"><code>echo "Hello2"</code></pre></div>
        <div class="submitButton" onclick="codeDownload();">Download</div>
    </body>
</html>
Download
筆者の環境ではDownloadボタンを押すとページ内のソースコードがhtmlファイルとしてダウンロードされました。

コメント