Vue aタグはクリックしてダウンロードすることを実現して、画像、txtファイルをダウンロードして、直接開く方式ではありません

この間、プロジェクトでファイルをダウンロードする必要があることに遭遇し、以前にカプセル化されたダウンロードコマンドを直接取り出し、jpg、txtファイルをダウンロードする際に、直接ダウンロードするのではなく、ブラウザでファイルを開き、aラベルにdownload属性を追加しても始まらないことに気づいた.私は先に前のパッケージの命令を贴り出して、もしダウンロードのファイルのタイプがExact、Word、Pdfフォーマットのだけならば直接持って使うことができて、もしその他のファイルのタイプの需要があるならば、引き続き文章の下で见ることができます

Exact、Word、Pdf形式ダウンロード

をサポート

let baseDownloadUrl = 'https://xxxxx.cn'  //   
//      v-down  
Vue.directive('down', {
	inserted: (el, binding) => {
		el.style.cssText = 'cursor: pointer;color:red;'
		el.addEventListener('click', () => {
			console.log(binding.value)
			let link = document.createElement('a')  //   a  
			link.style.display = 'none'
			link.href = baseDownloadUrl + binding.value //       
			link.setAttribute('download', '') //   downLoad  
			document.body.appendChild(link)
			link.click()
		})
	}
})

Vueページでの命令v-downの使用

<span v-down="item.Url">(  )</span>

ダウンロードファイルにjpg、txtなどのブラウザが直接プレビューできるファイルが存在する場合、上記の方法で問題が発生し、downloadを追加してもブラウザでダウンロードファイルを開くことができます.ダウンロードアドレスをBlobでバイナリに変換し、aラベルのhref属性としてdownload属性に合わせてダウンロードを実現することができます.具体的な実装コードは以下の通りである:

Vue.directive('down', {
  inserted: (el, binding) => {
    el.style.cssText = 'cursor: pointer;color:write;'
    el.addEventListener('click', () => {
      console.log(binding.value)
      let link = document.createElement('a')
      let url = baseDownloadUrl + binding.value
      //     url  blob  ，
      fetch(url).then(res => res.blob()).then(blob => { //             blob  
        link.href = URL.createObjectURL(blob)
        console.log(link.href)
        link.download = ''
        document.body.appendChild(link)
        link.click()
      })
    })
  }
})

Vueページでの命令v-downの使用

<span v-down="item.Url">(  )</span>

上記の方法は、上記の方法を少し調整して、アドレスを変換して、jpg、txtファイルのダウンロードを実現するだけです.もっと良い方法があれば、皆さんに教えてください.
エクスポート機能をしている場合、リクエストヘッダにtokenを携帯する必要がある場合は、私の別の記事を参考にしてください.https://blog.csdn.net/lhz_19/article/details/105784299