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';
    function iframeLoad() {
      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(function loadUrl() {
      iframe.contentWindow.location.href = url;
    }, 50);
  }

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

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

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

exportEerweima(){
	 var value = new FormData()
     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.zip
        var 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/rfc822
  
    const contentType = "application/x-zip-compressed";
    const blob = new Blob([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.png
    console.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 = new Image();
      // 解决跨域 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 = new MouseEvent('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);
    }
  }