查看和导出 .html/.csv/.xls/.zip等类型的文件（前端从后端接受文件流来实现）

目录

一.  生成文件

二.  查看html报告

三.  下载html报告（.html/.csv/.xls/.zip 同）

---

后端：利用Freemarker来生成文件，然后写成流传给前端（模板文件并注入数据）

前端：获取流来展示或下载（但是需要自定义模板文件，实现页面的样式）

一.  生成文件(可以不看，这是后端的逻辑，直接看二、三吧)

FreeMarker 是一款 模板引擎： 即一种基于模板和要改变的数据， 并用来生成输出文本(HTML网页，电子邮件，配置文件，源代码等)的通用工具。 是一个Java类库。

具体实现：  1. 定义模板

                    2. 加载模板

                    3. 生成对应的html文件

FreeMarker详细介绍_Trycol的博客-优快云博客_freemarker

二.  查看html报告

用XMLHttpRequest（客户端的一个 API）实现          去学习XMLHttpRequest --->

通过XMLHttpRequest提供的方法实现页面的预览查看。

const openReport=(fileId:string)=>{
    const reqUrl = `/api/gsQueryWdr/download/${fileId}`;
    const token = localStorage.getItem('authorization') || '';
    let xhr:XMLHttpRequest=new XMLHttpRequest();
    
    const xhrStateChange=()=>{
        if(xhr.readyState === 4){
            if(xhr.status===200){
                const newWindow = window.open(reqUrl, 'report');
                if(newWindow){
                    newWindow.document.title = '分析报告'
                    newWindow.document.body.innerHTML = xhr.response;
                }
            }
        }else{
            message.error('报告打开失败！');
        }
    }
    if(xhr){
        xhr.open('get', reqUrl,true);
        xhr.onreadystatechange = xhrStateChange;
        xhr.setRequestHeader('authorization', token);
        xhr.send();
    }
}

三.  下载html报告

ajax下载（Blob-利用Blob对象生成Blob URL）

.csv/.xls/.zip等文件是同一个道理，都是通过创建标签a，只是文件格式不一样

const downLoads = async(fileId: string)=>{
    const res = await DownLoad(fileId);
    
    //不要求的话，可以不判断错误信息，直接用else里的内容即可
    if(res.type === 'application/json'){
    //接口里的信息不显示在文档中，直接提示; //文件流转下json
    const reader=new FileReader();
    reader.readAsText(res,'utf-8');
    reader.onload=()=>{
        let  jsondata= JSON.parse(reader.result);
        if(jsondata.code !== 200){
            message.error(jsondata.msg);
        }
     };
    }else{
        const blob = new Blob([res], {type:'text/html;charset=utf-8'});
        const fileName = '报告.html'; //此处也可以是其他格式的文档，如.csv,上面也改一下type:'application/csv'; 如.xls, type:'application/vnd.ms-excel'; 如.zip,type:'application/zip';
    
        const link = document.createElement('a');
        link.download = fileName;
        link.href = URL.createObjectURL(blob);
        document.body.appendChild(link);
        link.onload = ()=>{};
        link.click();
        URL.revokeObjectURL(link.href); //释放URL对象
        document.body.removeChild(link);  //下载完成移除元素
    }else{
        message.error(res.msg);
    }
}

       * download的属性是HTML5新增的属性
       * href属性的地址必须是非跨域的地址，如果引用的是第三方的网站或者说是前后端分离的项目(调用后台的接口)，这时download就会不起作用。
       * 如果是下载浏览器无法解析的文件，例如.exe,.xlsx..那么浏览器会自动下载，但是如果使用浏览器可以解析的文件，比如.txt,.png,.pdf....浏览器就会采取预览模式
       * 对于.txt,.png,.pdf等的预览功能我们就可以直接不设置download属性(前提是后端响应头的Content-Type: application/octet-stream，如果为application/pdf浏览器则会判断文件为 pdf ，自动执行预览的策略)

 实现下载的方式有很多种，可以看下博文--->      
https://blog.youkuaiyun.com/ljy123w/article/details/123438648