前幾天，一個關于下載的問題，把我困在原地蠻久，記錄一下。

說到標題，后臺返回一個url，前端瀏覽器打開實現下載功能，直接想到的就是window.open(url) 來實現下載，但是這種方法 我個人認為一閃而過的白色頁面導致用戶體驗不是很好, so，就隨手寫寫。

• 1?window.location.href = url;
• 2 a標簽下載，栗子

可以使用download屬性指定下載下來的文件名

? 我在vue中，因為是導出，url參數根據頁面的選擇項而變化，點擊button，生成一個url，a標簽的href屬性綁定url，之后

<a :href="downloadUrl" style="display: none" ref="download"></a> // a標簽隱藏 this.$nextTick(() => { this.$refs.download.click() }) 這種的寫法代替了jquery的trigger事件

• ?3? form下載

/*** 兼容性的下載方式，調用瀏覽器的下載功能* 使用該方法需要跟后臺協商好傳遞token的字段名為access_token* @param url 文件下載請求的url* @param token 傳遞的token* @param input 傳遞的其他參數 [{name: 'reportPath', value: '/conc/report/201710300735080796.doc'}, {name: 'isOnline', value: false}]*/ const downloadFile = (url, token, input = []) => {var $form = document.createElement('form')var $input = document.createElement('input')if (token) {$input.setAttribute('type', 'hidden')$input.setAttribute('name', 'access_token')$input.setAttribute('value', token)}$form.setAttribute('method', 'get') // or post$form.setAttribute('action', url)$form.appendChild($input)for (var i = 0; i < input.length; i++) {var _input = document.createElement('input')_input.setAttribute('type', 'hidden')_input.setAttribute('name', input[i].name)_input.setAttribute('value', input[i].value)$form.appendChild(_input)}document.body.appendChild($form)$form.submit()$form.addEventListener('submit', function (e) {e.preventDefault()})document.body.removeChild($form) }

但是這種方法的體驗我感覺最好，但是是有限制的，如果你以get請求形式下載，url后面的？參數會全部被截取，我之前就是采用這種方式進行導出，結果才發現了這個問題。采取以上方式最好的url參數不是？攜帶，而是 以http：//XXXX/${參數}的形式最好

• 當為get請求時，請求所需的參數用input標簽來傳遞，直接寫在url后面是無效的。
• 當為post類型時，queryString參數直接寫在URL？后面，formData參數則用input標簽傳遞??

個人認為參數過多，就很麻煩了，因為要傳多少數據就得用多少input標簽。post請求的時候，如何后臺需要指定content-type，form做不到

• 4 iframe下載

這種方式，就是如果給了多個url，他都可以給你下載下來，還能指定下載下來的文件名，栗子

for (let i = 0; i < this.dataList.length; i++) {let url = this.dataList[i].contractSignUrllet token = cache.get('TOKEN').Authorizationlet ifr = document.createElement('iframe')ifr.style.display = 'none'ifr.src = url + '?access_token=' + tokendocument.body.appendChild(ifr)// 保存頁面 -> 保存文件ifr.contentWindow.document.execCommand('SaveAs', false, this.dataList[i].contractName)}

如果有什么不對之處，希望大家能指出來，謝謝。

?

?

?

?

?

總結

以上是生活随笔為你收集整理的谈一谈url实现文件下载的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。