最近MarkdownEditorのサービスを作っていて、作成したMarkdownファイルをjavascriptでダウンロード処理を実装したので、やり方をMEMOしておきますφ(･･

やったこと

私のサービスではMarkdownファイルをダウンロードする機能を作りたかったので、 propsで受け取ったitemの本文(markdownText)とタイトル(title)を使ってファイルを生成し、ダウンロード出来るVueコンポーネントを作りました👀

実際のコード

実装の流れは下記の通りです🙌

引数のitemの本文を元にBlobのインスタンスを作成
リンク要素aを作成
リンクのhrefにBlobのインスタンスのダウンロードURLを設定
リンクのdownloadにitemのタイトルを元にファイル名を設定
リンクをクリックしてダウンロードを実行

↓実際のVueコンポーネントはこちらです↓

<template>
  <i
    class="fas fa-file-download download"
    @click="handleOnDownload($event, item)"
  />
</template>
<script>
export default {
  name: 'DownloadLink',
  components: {},
  props: ['item'],
  methods: {
    handleOnDownload: function(e, item) {
      e.preventDefault()
      const blob = new Blob([item.markdownText], { 'type' : 'text/plain' })
      let link = document.createElement('a')
      link.href = window.URL.createObjectURL(blob)
      link.download = `${item.title}.md`
      link.click()
    }
  }
}
</script>