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';
    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);
    }
  }