Angular：将从 Azure 检索到的 blob 更改为 csv 并将其保存在本地

Question

问题： 我在 Azure blob 存储容器中有一个 csv 文件。我尝试使用 Angular 下载它并将其保存到用户计算机。我可以下载它，但它保存为 .xls 文件而不是 .csv，即使源是 csv。如果我尝试在保存之前将其转换为 csv，则保存的 excel sheet 为空。

目标：我想将其下载为原始 csv，或者在将其保存到本地之前将其从 xls 转换为 csv。

我试过几种方法...这是我的service.ts

private containerClient(): ContainerClient {
    return new BlobServiceClient(`https://${this.accountName}.blob.core.windows.net?${this.sas}`).getContainerClient(this.containerName);
  }

 downloadCSV(handler: (blob: Blob) => void){
    const blobClient = this.containerClient().getBlockBlobClient("AGENCIES.csv");
    blobClient.download().then(res => {
      res.blobBody?.then(blob => {
        handler(blob);
      });
    });
  }

  async downloadCSVwithConnectionString(handler: (blob: Blob) => void){
    const containerClient = this.blobServiceConnectionString.getContainerClient(this.containerName);
    await containerClient.getBlockBlobClient("AGENCIES.csv").download().then(res => {
      res.blobBody?.then(blob => {
        handler(blob);
      });
    });
  } 

  downloadCSVwithConnectionString2(){
    const containerClient = this.blobServiceConnectionString.getContainerClient(this.containerName);
    return containerClient.getBlockBlobClient("AGENCIES.csv").download();
  }

这是我的 component.ts

import { AzureBlobStorageService } from 'src/app/services/azure-storage/azure-blob-storage.service';
import * as XLSX from 'xlsx';  
import * as FileSaver from 'file-saver';

tryDownload1(){
    tryDownload1(){
    this.azure.downloadCSV(blob => {
      let url = window.URL.createObjectURL(blob);
      window.open(url);
    });
   }


  tryDownload2(){
this.azure.downloadCSVwithConnectionString(blob => {
      let csvData = XLSX.utils.sheet_to_csv(blob);
      const data: Blob = new Blob([csvData], { type: 'application/vnd.ms-excel' });
      FileSaver.saveAs(data, "CSVFile" + new Date().getTime() + '.csv');
    });
  }

  tryDownload3(){
    this.azure.downloadCSVwithConnectionString2().then(res => {
      console.log(res);
      let csvData = XLSX.utils.sheet_to_csv(res);
      console.log(csvData);
      const data: Blob = new Blob([csvData], { type: 'text/plain' });
      console.log(data);
      FileSaver.saveAs(data, "CSVFile" + new Date().getTime() + '.csv');
    });
  }

注意：我使用了 XLSX，因为我找不到只适用于 xls 的工作包

我在其中一个中添加了一些控制台日志，以尝试确定数据是否正确传输到 csv，但似乎没有。

Answer 1

对于遇到此问题的任何人，以下是我的解决方法...

在存储容器中的 Microsoft Azure 上，我打开了正在下载的文件的属性。我将“CONTENT-TYPE”从“application/vnd.ms-excel”更改为“text/csv”.

我在 service.ts 中使用了相同的“downloadCSV”函数，并在 component.ts 中使用了以下函数。所做的更改是将文件名更改为“AGENCIES.csv”而不是随机的 url 密钥。

constructor(
    private azure: AzureBlobStorageService,
    @Inject(DOCUMENT) private document: Document,
    private elementref: ElementRef,
    private render: Renderer2
    ) { }

 tryDownload1(){
    this.azure.downloadCSV(blob => {
      let url = window.URL.createObjectURL(blob);

      let downloadLink = this.document.createElement("a");
      downloadLink.href = url;
      downloadLink.download = "AGENCIES.csv";

      this.render.appendChild(this.elementref.nativeElement, downloadLink);
      downloadLink.click();
      this.render.removeChild(this.elementref.nativeElement, downloadLink);
    });
  }

Angular：将从 Azure 检索到的 blob 更改为 csv 并将其保存在本地

Angular: changing retrieved blob from Azure into a csv and save it locally

blob

azure

export-to-csv

azure-blob-storage

angular