ファイルをダウンロードできるブログの記載方法

2023-02-03:気付いたらブラウザの挙動が変わっていたので少し追記しました。

 

ブログへファイルを添付するには…と少し調べてみると、Googleドライブ等の外部サイトへファイルをアップロードしてそのリンクを貼り付けるのが一般的なようです。

 

結論から言うと、この方法が良いと私も思います。

 

ただ、サイズの小さなファイルを少しだけ貼り付けたいだけなので何とかならないか試してみたので、その結果を記載します。

 

Data URI scheme

まず思いついたのは電子メールのようにBase64エンコードして本文中(HTML)にファイルを埋め込めないか?という事です。

少し調べてみるとData URI schemeという、そのまんまの手段がありました。

こちらを参考にHTML編集で下記のように記載すると…

<a href="data:image/png;base64,iVBORw0KGgoAAA
ANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4
//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU
5ErkJggg==" download="reddot.png">reddot.png</a>

↓実際に入力した結果

reddot.png

期待通りpngファイルのダウンロードができました。

気付いたら挙動が変わっていて、現在(2023年2月)は多くのブラウザでクリックでダウンロードが開始されません。
右クリックで[名前を付けてリンク先を保存...]を選択する必要があります。

 

んじゃ、Zipファイルで…

<a href="data:application/zip;base64,
UEsDBBQAAAAAABFOXlVe+tHeDgAAAA4AAAAIAAAAdGVzdC50eHSCxIK3gsaDZoFb
g14NClBLAQIUABQAAAAAABFOXlVe+tHeDgAAAA4AAAAIAAAAAAAAAAAAIAAAAAAA
AAB0ZXN0LnR4dFBLBQYAAAAAAQABADYAAAA0AAAAAAA=
" download="test.zip">test.zip</a>

としたら、HTML編集で保存を行うとhref="..."の部分がごっそり削除されてしまいました。

いろいろなMIMEタイプを試してみましたがimage以外はすべて削除されてしまうようです。

○ image

× application,audio,video,text,font,model

 

管理者が画像以外はアップロードしてほしくなくて付いている機能だと思います。

そのため、最初に記載した通りGoogleドライブ等の外部サイトを利用した方が良いという結論となりました。

 

 

ただダウンロード後は拡張子でファイル種別を判断することになるので、下記のようにしてしまえばZipファイルもダウンロードすることは可能だったりします。(ブラウザやOSに依存しそうな気がしますが…)

<a href="data:image/jpeg;base64,
UEsDBBQAAAAAABFOXlVe+tHeDgAAAA4AAAAIAAAAdGVzdC50eHSCxIK3gsaDZoFb
g14NClBLAQIUABQAAAAAABFOXlVe+tHeDgAAAA4AAAAIAAAAAAAAAAAAIAAAAAAA
AAB0ZXN0LnR4dFBLBQYAAAAAAQABADYAAAA0AAAAAAA=
" download="test.zip">test.zip</a>

test.zip