プロジェクト開発の過程で、ダウンロード機能に遭遇することがよくあります。私が使用した方法に基づいて、要約を作成し、この記事を記録として書きました。
まず、ラベルの使用（リクエストの取得）
タグが最も簡単な方法です。ファイルをアドレス指定するか、 href属性タグへのインターフェイスをタグとして追加するだけで、ダウンロード属性にダウンロードファイルの名前を指定できます。ダウンロード属性省略可能省略した場合、ブラウザはソースファイル名を自動的に認識します。
<a href="文件地址" download='文件名'>下载</a>
//url 文件地址 或 接口地址
function downLoadFile(url) {
let a = document.createElement('a')
a.href = url;
a.download = '文件名'
a.click();
}
長所：
1。ファイルがtxt、png、jpg、およびファイルを開くことをサポートするその他のブラウザの場合、ダウンロードせずにファイルを直接開きます。このとき、ダウンロード属性を追加してダウンロードします。
短所：
1。知っておく必要があります。ダウンロードアドレス;
2、クロスドメインでブラウザが閲覧できるファイルをダウンロード
できません; 3。認証を実行できません;
2、window.open（）メソッド（リクエストを取得）
//url 文件地址 或 接口地址
function downLoadFile() {
let url = '/xxx/xxx'; //接口
window.location.href = url;
}
長所：
1。シンプルでわかりやすい;
短所：
1。ダウンロードの進行状況を知ることができない; 2。URLの
長さの制限とエンコードの問題が発生する;
3。ヘッダーを追加できず、認証を実行できない;
4。ファイルがtxtである、png、jpgこれらのブラウザがファイルを開くことをサポートしている場合、ファイルはダウンロードされませんが、直接開かれます。
3.フォーム送信方法（get request）により
動的にフォームフォームを生成し、フォーム送信機能を利用してダウンロードを実現します。
//url 文件地址 或 接口地址
//data 请求参数：[{key:name,key1:value}]
function downLoadFile(url,data){
let form = document.createElement('form');
for(let i in data){
let input = document.createElement('input');
input.name = data[i].key;
input.value = data[i].key1;
form.appendChild(input)
}
form.style.display = 'none';
form.method = "GET";//请求方式
form.action = 'url'； //下载文件地址
document.body.appendChild(form);
form.submit();
document.body.removeChild(form);
}
長所：
1。従来の方法、優れた互換性、URLの長さ制限の問題なし、
短所：
1。ダウンロードの進行状況がわからない、
2。ファイルがtxt、png、jpg、およびファイルを開くことをサポートするその他のブラウザの場合、ファイルを直接ダウンロードして開きます。
4.
iframeを介して動的にiframeを生成します（リクエストの取得、アドレススプライシングパラメーター）。iframeにはsrc属性があり、その本質はhttpリクエストを送信することです。
//url 文件地址 或 接口地址
//id 参数id
function downLoadFile(){
let iframe= document.createElement('iframe');
iframe.src = `${
item.url}?id=${
id}`;
iframe.style.display = 'none'
document.body.appendChild(iframe);
}
短所：
1。互換性の問題;
2.ファイルがtxt、png、jpg、およびファイルを開くことをサポートするその他のブラウザの場合、ダウンロードせずに直接ファイルを開きます。
5.タグ付きのblob形式（リクエスト後）を
使用してファイルをBlobバイナリオブジェクトに変換し、タグ付きでダウンロードします。
return new Promise((resolve, reject) => {
this.$http.defaults.headers['content-type'] = 'application/json;charset=UTF-8'
this.$http({
method: 'post',
url: '/xxx/xxx', // 接口地址
data: data, // 参数
responseType: 'blob' // 表明返回服务器返回的数据类型
}).then(response => {
if(response.headers.filename != undefined){
resolve(response.data)
let blob = new Blob([response.data], {
type: 'application/vnd.ms-excel'
})
let fileName = Date.parse(new Date()) + '.xlsx'
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, fileName)
} else {
var link = document.createElement('a')
link.href = window.URL.createObjectURL(blob)
link.download = fileName
let evt = document.createEvent('MouseEvents')
evt.initEvent('click',true,true)
link.dispatchEvent(evt)
//释放内存
window.URL.revokeObjectURL(link.href)
}
}else{
this.$message.error("数据为空！")
}
},
err => {
reject(err)
}
)
})
長所：
1。ヘッダーを設定でき、認証も追加できます
。2。ブラウザーで参照できるファイルを直接ダウンロードできます。
短所：
1。IE10では使用できません。