IVIEW+VUE文件流下载EXCEL问题

痛定思痛。 2023-10-06 12:08 16阅读 0赞

用Axios调用导出方法返回的文件流下载时控制台返回乱码  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDMwNDY1_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDMwNDY1_size_16_color_FFFFFF_t_70 1]  
vue需要用 new Blob(\[data\])来处理  
后台接口

@PostMapping(value = "exportKeHuFormat")
        @ApiOperation(value = "导出-客户信息导入模板", notes = "")
        public void exportKeHuFormat(HttpServletRequest request, HttpServletResponse response){
        
            try {
        
                api.exportKeHuFormat(request,response);
            } catch (Exception e) {
        
                e.printStackTrace();
    
            }
        }

前台方法

axios.post(local+'kehu/exportKeHuFormat',
                  {
        },{
        
                    headers:{
        
                      'Authorization': sessionStorage.getItem('token')
                    },
                    responseType: 'blob',
                  }).then(res => {
        
                  let blob1 = new Blob([res.data]);//new Blob([res])中不加data就会返回[objece objece]内容（少取一层）
                  let fileName = '客户信息.xlsx';//下载文件名称
                  let elink = document.createElement('a');
                  elink.download = fileName;
                  elink.style.display = 'none';
                  elink.href = URL.createObjectURL(blob1);//创建一个DOMString包含了一个对象URL，该URL可用于指定源 参数对象的内容。
                  document.body.appendChild(elink);
                  elink.click();
                  URL.revokeObjectURL(elink.href); // 释放URL 对象
                  document.body.removeChild(elink);
                }).catch(err => {
        
    
                })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDMwNDY1_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200630175908742.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDMwNDY1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDMwNDY1_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020063017544254.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDMwNDY1,size_16,color_FFFFFF,t_70