如何通过电子邮件Ionic 3将JSON转换为CSV作为附件

时间:2018-12-07 17:54:33

标签: ios angular csv cordova ionic-framework

我正在为我的客户实施离线功能,该功能允许他们离线提交表单并稍后重新提交(主要用于无服务)。我希望允许他们使用故障保护功能通过电子邮件将数据发送给我们,以防万一提交被卡住。我使用Ionic Email Composer插件进行摄影,如果我想发送JSON数据,一切都可以正常工作,但是如果我的用户只是发送CSV文件,我希望这样做。我不确定将JSON代码转换为CSV然后作为附件发送的最佳选择是什么。

.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';
import { Storage } from '@ionic/storage';
import { EmailComposer } from '@ionic-native/email-composer';
import { Angular5Csv } from 'angular5-csv/Angular5-csv';//Testing

import { ReapService } from '../../services/reap-service';
@IonicPage()
@Component({
  selector: 'page-offline-data',
  templateUrl: 'offline-data.html',
})
export class OfflineDataPage {
  private offlineData:any [] =[];
  private isData:boolean = false;
  private emailJSONData:any = [];
  private test:any;
  constructor(public navCtrl: NavController,
              public navParams: NavParams,
              public storage: Storage,
              public viewCtrl: ViewController,
              private emailComposer: EmailComposer,
              public reap: ReapService) {

  }
  ionViewDidLoad(){
    this.storage.get('offlineSubmission').then((data)=>{
        this.offlineData=data;
        console.log(data);
        /************ TESTING *********************/
        console.log(JSON.stringify(data));
        for(let i=0;i<data.length;i++){
            this.emailJSONData.push(data[i]["Info"]);
        }
        console.log(this.emailJSONData);
        this.test = new Angular5Csv(this.emailJSONData,'Form data');
        console.log(this.test.csv);
    });

    if(this.offlineData==[]){
      this.isData = false;
      console.log(this.isData);
    }
    else{
      this.isData = true;
    }
  }
  dismiss() {
    this.viewCtrl.dismiss();
  }
  sendEmail(){
    this.emailComposer.isAvailable().then((available: boolean) =>{
     if(available) {
       //Now we know we can send
     }
    },(err) => {
      this.reap.presentToast('Error Emailing Data');
      console.log(err);
    });

    let email = {
      to: 'john@doe.com',
      cc: 'jane@doe.comm',
      //bcc: ['john@doe.com', 'jane@doe.com'],
      attachments: [
        'file://'+this.test+'.csv'//Where I want to include the csv
      ],
      subject: 'Offline Data Submissions',
       body: this.emailJSONData.toString(),//Currently sending the raw JSON in body
      isHtml: false
    };

    // Send a text message using default options
    this.emailComposer.open(email);
    }
}
JSON测试代码:我只需要数组的Info部分。

[{"Type":"SIG","Info":[{"personnel":{"ID":"1","FullName":"Test User","default":"false"}},{"signature":"data:image/png;base64,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"}],"Status":"Pending"}]

我目前正在使用Angular5csv进行测试,但是不确定是否可以使用Ionic File或任何其他有用的插件,这些插件可能有助于满足我的需求。

2 个答案:

答案 0 :(得分:0)

您可以使用cordova-plugin-file将csv文件下载到IOS设备文件系统中。您可以使用Email Composer插件中的附件属性来附加相同的文件路径。

答案 1 :(得分:0)

所以我终于找到了答案,就我而言,从我将要使用的复杂对象创建csv并不是一个理想的选择,但是这里有一个示例:

convertToCSV(offlineData) {
      var csv: any = ''
      var line: any = ''

      var offlineLength = offlineData.length
      console.log(offlineLength);
      //Header
      for (var i = 0; i < offlineLength; i++) {
        var formType = offlineData[i]['Type'];
        line += formType+ '\r\n\r\n';
          var SpT = offlineData[i]['Info'].length
          for (var k = 0; k < SpT; k++){   
            line += Object.keys(offlineData[i]['Info'][k]);
            if (line != '') line += ';'
          }
              line += '\r\n\r\n';
      }
      csv += line + '\r\n';
      //offlineData
      for (let i = 0; i < offlineLength; i++) {
        line = ''
        for (var j = 0; j < SpT; j++) {
          if (line != '') line += ';'
          switch(offlineData[i]['GPS'][j]){
            case offlineData[i]['GPS'][j] == 'ID':
                line += offlineData[i]['GPS'][j]['ID'];
                break;
            case 'Lat':
                line += 'Lat';
                break;
            case ['Lon']:
                line += 'Lon';
                break;
            default:
                line += 'Test';
                break;
          }
        }
        csv += line + '\r\n'
      }
      return csv
    }
    
saveAsCsv() {
      var csv: any = this.convertToCSV(this.csvData)
      console.log(csv)
      var fileName: any = "test.csv"
      this.File.writeFile(this.File.dataDirectory, fileName, csv ,{ replace: true })
      .then(() => {      
       let email = {
         to: 'email@email',
         attachments: [
           this.file.dataDirectory + 'test.csv'
         ],

         subject: 'subject',
         body: 'body text...',
         isHtml: true
       };
       this.emailComposer.open(email);

     })
     .catch((err) => {
       console.error(err);
     });

 }

当然,这不是我在问题中使用的确切数据,但是convertToCSV函数将允许您操纵对象,然后通过电子邮件将其吐到csv中。

我的答案的积分为here