在VUE中--導出json文件，前端請求接口返回一堆json數據，如何導出成json文件並且下載？？？

areaButton(){
      // 點擊下載  
      outArea().then(res=>{   
        var data = JSON.stringify(res) 
        //encodeURIComponent解決中文亂碼
        let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(data);
        //通過創建a標簽實現
        let link = document.createElement("a");
        link.href = uri;
        //對下載的文件命名
        link.download =  "地區數據表.json";
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      })
    },

 

 

 參考鏈接：https://blog.csdn.net/xxxxxxxxYZ/article/details/94572687

 

如果是文件流或者鏈接的話（不要求token值）

// 點擊下載（預覽查看）
    onPreview(file) {
      const a = document.createElement('a')
      a.href = `${window.config1}/annex/annexDownload?id=${file.id}`
      a.download = file.name
      a.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }))
    },

 項目中實際應用的

const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
            const url = window.URL.createObjectURL(blob)
            var filename = '訂單列表'
            const link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', filename + '.xls')
            document.body.appendChild(link)
            link.click()

 

不要忘記在請求時加上responseType:'blob