很多網(wǎng)站在實(shí)現(xiàn)下載txt功能時(shí)，需要用戶點(diǎn)擊下載按鈕后才能彈出下載框進(jìn)行下載，這里我們介紹如何使用 Vue 來實(shí)現(xiàn)下載 txt 文件的功能。

首先我們需要在 html 文件中添加一個(gè)按鈕：

<button @click="downloadTxt">下載txt</button>

點(diǎn)擊按鈕后會(huì)調(diào)用 downloadTxt 方法，該方法將通過 ajax 的方式獲取服務(wù)器上的 txt 文件并生成 a 標(biāo)簽進(jìn)行下載，代碼如下：

methods: {
downloadTxt () {
let url = 'test.txt' // txt 文件地址
this.$http.get(url).then(data => {
let link = document.createElement('a') // 生成 a 標(biāo)簽
link.download = 'test.txt' // 修改下載時(shí)文件名
link.style.display = 'none'
document.body.appendChild(link)
link.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(data.body)
link.click()
document.body.removeChild(link) // 下載完成后移除 a 標(biāo)簽
}, error => {
console.log(error)
})
}
}

在以上代碼中，首先定義了 txt 文件的地址 url，然后使用 this.\$http.get 方法來獲取文件內(nèi)容。等文件獲取完成后，使用 document.createElement 創(chuàng)建一個(gè) a 標(biāo)簽，并設(shè)置 download 屬性來修改下載時(shí)的文件名。因?yàn)樵?a 標(biāo)簽不需要在頁(yè)面中顯示，所以設(shè)置 style.display 為 none。接著將該標(biāo)簽插入到頁(yè)面中。并將文件內(nèi)容賦給該 a 標(biāo)簽的 href 屬性，這里需要使用 encodeURIComponent 對(duì)文件內(nèi)容進(jìn)行編碼。最后調(diào)用 link.click() 來觸發(fā)下載，下載完成后將該 a 標(biāo)簽從頁(yè)面中移除。

最后需要在 Vue 實(shí)例中引入 VueResource：

import VueResource from 'vue-resource'
Vue.use(VueResource)

并在 Vue 的創(chuàng)建過程中配置 VueResource 相關(guān)的選項(xiàng)以根據(jù)需要進(jìn)行更改。

new Vue({
http: {
root: '/', // 請(qǐng)求根路徑
headers: { // 請(qǐng)求頭
'Content-Type': 'application/json;charset=utf-8'
}
},
el: '#app',
...
})

至此，我們已經(jīng)完成了 Vue 中下載 txt 文件的功能實(shí)現(xiàn)。