将数据转换为CSV文件并将其存储在angular 7的Azure Blob存储中

时间:2020-07-20 13:10:09

标签: angular angular7 azure-blob-storage

我需要将数据导出到一个csv文件中,并将其存储在azure blob存储中。我只能按照以下方法将数据转换为csv文件并下载。但就我而言,我不需要下载它,而是将其保存在蔚蓝的Blob存储中。

html

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

TS

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

1 个答案:

答案 0 :(得分:0)

如果要将数据导出到一个csv文件中,然后将其存储在Azure存储Blob中,则有两个步骤。

  1. 将数据导出到CSV文件中,但不下载

请参阅代码here。关于angular7-csv,有官方的document

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);
  }
  1. 将文件上传到Azure存储Blob

此功能是将文件上传到Azure存储的功能,请参阅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;
  }