Vue實現文件的上傳與下載

項目需求： 前端頁面需要導出Excel文件，傳入過多的參數給后端，get地址欄不行，只能接受post方式去導出數據

1、get的下載方式

 let url =  xxxx.action?a=xx&b=yy;
 window.location.href = url;
 // 或者
 window.open(url, '_self')

弊端：當請求參數較多時，get的方式無法使用，這時候需要考慮post的方式，但是直接通過ajax的post的方式無法調用瀏覽器的下載功能

2、post的下載方式

原理： 創建一個隱藏form表單，通過form表單的提交刷新功能，實現下載。

代碼如下：

export default {
  methods: {
    // 導出excel
    postExcelFile (params, url) {
      // params是post請求需要的參數，url是請求url地址
      var form = document.createElement('form')
      form.style.display = 'none'
      form.action = url
      form.method = 'post'
      document.body.appendChild(form)
      // 動態創建input並給value賦值
      for (var key in params) {
        var input = document.createElement('input')
        input.type = 'hidden'
        input.name = key
        input.value = params[key]
        form.appendChild(input)
      }

      form.submit()
      form.remove()
    }
  }
}

需要注意的是，這種方式的enctype默認為form-data的形式，而不是application/json的格式，因此后端的接口也應該要參數格式一致。

 

正常情況下，可以修改enctype的值，參考文章：

https://www.cnblogs.com/mmzuo-798/p/11634055.html