vue+iview aタグによるファイルダウンロード解決方法

vue+iview aタグによるファイルダウンロード
方法1:ダウンロードしたファイルをローカルディレクトリの下に置く場合は、必ずテンプレートファイルをpublicディレクトリの下に置く必要があります.そうしないと、権限の問題でファイルパスが見つかりません.プロジェクトの更ディレクトリ--"public-"tpls-"はテンプレートをダウンロードします.xls開発環境と導入環境の経路が異なるため、経路接合が正しいかどうかに注意してください.
1.1直接aラベル+download属性を使用する

ダウンロード{downTplNm}}テンプレート

1.2ファイルのダウンロードアドレスとファイル名を定義する(注意:中国語のダウンロードでエラーが発生した場合、テンプレート名を英語に変更してみる)

methods: {
    type2Obj: function(type){
        switch(type){
        case: 'wl':
            this.downTplNm="   ",
            this.downUrl = "../tpls/     .xls",
            this.downNm = "     .xls"
        }
    } 
}

方法2:直接開くのではなく、ファイルをダウンロードする必要がある場合があります.使用方法1では、一部のファイルのダウンロードを実現できますが、画像やPDFなどの類似ファイルが直接開くことがあります.これはブラウザのデフォルトの行為です.このデフォルトの行を阻止する方法はありませんか.aラベルのリンクをクリックして実行するのはダウンロード行為ですか.またChromeのドメイン間ダウンロードファイルのサポートは友好的ではありません.ここでは有効なソリューションを提供しています.
2.1 aタグを使用してイベントをバインドする

ダウンロード{downTplNm}}テンプレート

2.2ダウンロード方法を定義してCORS問題を回避する方法の1つは、XHRからファイルの取得を要求し、ファイルをblobとして使用することです.ここではaxiosを使用していますが、任意のlibを使用することができます.

import Axios from 'axios'

methods: {
  downloadItem (url) {
    Axios.get(url, { responseType: 'blob' })
      .then(({ data }) => {
        //         blob mime        
        let blob = new Blob([data], { type: 'application/vnd.ms-excel' })
        let link = document.createElement('a')
        link.href = window.URL.createObjectURL(blob)
        link.download = url.split('/').pop()
        link.click()
      .catch(error => {
        console.error(error)
      })
    })
  }
}

3.注記ie 11の下でバグをテストし、テンプレート接尾辞が'.xlsx’の場合、IEブラウザの下でダウンロードできない場合がありますが、パスなどは間違いありませんが、ダウンロードは.htmlのファイル、文字化けしている.解决方法:使用する.xls接尾辞のフォーマットでいいです