将数据转换为 csv 文件并将其存储在 angular 7 中的 azure blob 存储中答案

【问题标题】：Convert data to a csv file and store it in azure blob storage in angular 7将数据转换为 csv 文件并将其存储在 angular 7 中的 azure blob 存储中
【发布时间】：2020-11-09 17:58:01
【问题描述】：

我需要将数据导出为 csv 文件并将其存储在 azure blob 存储中。我只能通过以下方法将数据转换为 csv 文件并下载。但就我而言，我不需要下载它，而是将其保存在 azure blob 存储中。

html

<input type="submit"" (click)="generateCSVfile(data)"/>

downloadFile(data: any) {
    const replacer = (key, value) => value === null ? '' : value; // specify how you want to handle null values here
    const header = Object.keys(data[0]);
    let csv = data.map(row => header.map(fieldName => JSON.stringify(row[fieldName], replacer)).join(','));
    csv.unshift(header.join(','));
    let csvArray = csv.join('\r\n');

    var blob = new Blob([csvArray], {type: 'text/csv' })
    saveAs(blob, "myFile.csv");
}

【问题讨论】：

标签： angular angular7 azure-blob-storage

【解决方案1】：

如果要将数据导出为 csv 文件，然后将其存储在 azure storage blob 中，则有两个步骤。

将数据导出为 CSV 文件，但不要下载

参考代码here。有官方document关于angular7-csv。

dtHolidays :any;    
csvOptions = {
        fieldSeparator: ',',
        quoteStrings: '"',
        decimalseparator: '.',
        showLabels: true,
        showTitle: true,
        title: 'Your Holiday List :',
        useBom: true,
        noDownload: true,  //If true, disables automatic download and returns only formatted CSV
        headers: ["Holiday ID", "Holiday Date", "Holiday Comment", "Holiday Status"]
      };

ngOnInit() {
    //Your data for download in csv file.
    this.dtHolidays =[
      {"id": 101, "Holiday_Date": "21/02/2019", "Holiday_Comment": "company holiday calendar of 2019. ", "Holiday_Status": "Active"}
    ]; 
  }

formatCSV(){
    //this.dtHolidays : DATA , HolidayList : CSV file Name, this.csvOptions : file options
    new  AngularCsv(this.dtHolidays, "HolidayList", this.csvOptions);
  }

将文件上传到 Azure 存储 blob

这是上传文件到Azure Storage的函数，参考sample。

public async uploadBlobToStorage (file: File): Promise {
    const anonymousCredential = new AnonymousCredential();
    const pipeline = StorageURL.newPipeline(anonymousCredential);
    const serviceURL = new ServiceURL(
      `PASTE BLOB SERVICE SAS URL HERE`,
      pipeline
    );
    const containerName = "files";
    const containerURL = ContainerURL.fromServiceURL(serviceURL, containerName);
    const blobName = `${file.name}-${new Date().getTime()}`
    const blobUrl = BlobURL.fromContainerURL(containerURL, blobName);
    const blockblobURL = BlockBlobURL.fromBlobURL(blobUrl);
    const options = {blockSize: this.getBlockSize(file), parallelism: 10, progress: (transferProgressEvent: TransferProgressEvent) => {
      this.onProgressChanged(transferProgressEvent, file, this._uploadProgressSource);
    } };
    const blobUploadCommonResponse = await uploadBrowserDataToBlockBlob(Aborter.none, file, blockblobURL,options);

    return blobUploadCommonResponse;
  }

【讨论】：