Angular导出功能（excel导出功能、文件数据流导出功能、图片的下载导出功能）

Angular导出功能（excel导出功能、文件数据流导出功能、图片的下载导出功能）

场景1：（直接返回网络地址进行导出的excel）

后台返回的是 ： “http://192.168.0.188:11570/statics/excel/食材清单.xlsx”
这种url直接导出的下载功能实现：

downloads(url:string){const iframe = document.createElement('iframe');
    iframe.style.display ='none';functioniframeLoad(){const win = iframe.contentWindow;const doc = win.document;if(win.location.href === url){if(doc.body.childNodes.length >0){}
        iframe.parentNode.removeChild(iframe);}}
    iframe.src ='';
    document.body.appendChild(iframe)setTimeout(functionloadUrl(){
      iframe.contentWindow.location.href = url;},50);}

场景2：（返回的是数据流的形式再进行导出的）

后台返回的是 （数据流的形式，如下图）
这种数据流进行导出的功能实现：

简单讲解一下原理：这种文件数据流的返回值要获取拿到，要先在请求头加入responseType与observe，进行声明指定。再者在拿到该数据流后还要再进行进一步的数据处理才能将其导出

exportEerweima(){var value =newFormData()
     value.append('productClass',this.productClass)//自己的数据封装传参，与导出功能无关this._CommonService.postList('/api/goods/downloadBasProductQRCode', value,//-------------------关键---------------------------{
        responseType:"blob",//指定响应中包含的数据类型,指定response 是一个包含二进制数据的 Blob 对象
        observe:'response',//要获取到完全的response,在 发起请求时 在option中添加 observe: ‘response’;}).subscribe((res:any)=>{//响应头当中的返回如下//content-disposition: attachment;filename=%E7%89%A9%E8%B5%84%E4%BA%8C%E7%BB%B4%E7%A0%81.zipvar name = res.headers.get('content-disposition')//获取文件名，（后台返回的文件名在响应头当中）
        name =decodeURIComponent(name)//由于中文通常都是乱码，所以需要解码
        name = name.substring(name.indexOf("=")+1)//数据处理获得名字this.downloadFile(res.body, name)//数据流都存在body中})}//文件数据流有多种类型，需自己明确好downloadFile(data, name){// ContenType类型大全// .doc                          application/msword// .docx                         application/vnd.openxmlformats-officedocument.wordprocessingml.document// .rtf                          application/rtf// .xls                          application/vnd.ms-excel application/x-excel// .xlsx                         application/vnd.openxmlformats-officedocument.spreadsheetml.sheet// .ppt                          application/vnd.ms-powerpoint// .pptx                         application/vnd.openxmlformats-officedocument.presentationml.presentation// .pps                          application/vnd.ms-powerpoint// .ppsx                         application/vnd.openxmlformats-officedocument.presentationml.slideshow// .pdf                          application/pdf// .swf                          application/x-shockwave-flash// .dll                          application/x-msdownload// .exe                          application/octet-stream// .msi                          application/octet-stream// .chm                          application/octet-stream// .cab                          application/octet-stream// .ocx                          application/octet-stream// .rar                          application/octet-stream// .tar                          application/x-tar// .tgz                          application/x-compressed// .zip                          application/x-zip-compressed// .z                            application/x-compress// .wav                          audio/wav// .wma                          audio/x-ms-wma// .wmv                          video/x-ms-wmv// .mp3 .mp2 .mpe .mpeg .mpg     audio/mpeg// .rm                           application/vnd.rn-realmedia// .mid .midi .rmi               audio/mid// .bmp                          image/bmp// .gif                          image/gif// .png                          image/png// .tif .tiff                    image/tiff// .jpe .jpeg .jpg               image/jpeg// .txt                          text/plain// .xml                          text/xml// .html                         text/html// .css                          text/css// .js                           text/javascript// .mht .mhtml                   message/rfc822const contentType ="application/x-zip-compressed";const blob =newBlob([data],{type: contentType });const url = window.URL.createObjectURL(blob);// 打开新窗口方式进行下载// window.open(url); // 以动态创建a标签进行下载const a = document.createElement("a");
    a.href = url;
    a.download = name;
    a.click();
    window.URL.revokeObjectURL(url);}

场景3：下载/导出图片功能

后台返回一个图片的网络路径：“http://192.168.0.188:11570/statics/qrcode/1639281121551-1-1.png”
要求进行导出下载功能

downloadIamge(fileUrl:any, fileName:any){console.log("fileUrl:",fileUrl)//图片路径   //fileUrl: http://192.168.0.188:11570/statics/qrcode/1639281121551-1-1.pngconsole.log("fileName:",fileName)//图片名字//fileName: http://192.168.0.188:11570/statics/qrcode/1639281121551-1-1.png// 获取文件扩展名const index = fileUrl.lastIndexOf('.');const fileExtension = fileUrl.substring(index +1);// 图片下载if(/^image\[jpeg|jpg|png|gif]/.test(fileExtension)){const image =newImage();// 解决跨域 Canvas 污染问题
      image.setAttribute('crossOrigin','anonymous');
      image.onload=()=>{const canvas = document.createElement('canvas');
        canvas.width = image.width;
        canvas.height = image.height;const context = canvas.getContext('2d');
        context.drawImage(image,0,0, image.width, image.height);const url = canvas.toDataURL(fileUrl);// 得到图片的base64编码数据const a = document.createElement('a');// 生成一个a元素const event =newMouseEvent('click');// 创建一个单击事件
        a.download = fileName;// 设置图片名称
        a.href = url;// 将生成的URL设置为a.href属性
        a.dispatchEvent(event);// 触发a的单击事件};
      image.src = fileUrl;}else{const elemIF = document.createElement('iframe');
      elemIF.src = fileUrl;
      elemIF.style.display ='none';
      document.body.appendChild(elemIF);setTimeout(()=>{
        document.body.removeChild(elemIF);},1000);}}