从IONIC 3的资产文件夹下载CSV文件

时间:2018-09-20 05:20:05

标签: javascript angular ionic2 ionic3 file-transfer

我有一个LiveData文件,它位于demo-file.csv文件夹中,因此如何从移动设备下载文件,

这是我的HTML和组件代码。

HTML代码

assets/csv

组件代码

<button ion-button type="button" block (click)="downloadFile('assets/csv/demo-file.csv', 'demo-file.csv')">Download Demo File</button>

我无法下载文件,我的PATH中是否缺少任何内容?

3 个答案:

答案 0 :(得分:4)

  

HTML代码

 <button ion-button type="button" block (click)="downloadFile('demo-file.csv')">Download Demo File</button>
  

组件代码

 declare var cordova: any; // declare Top Section of component
 public downloadFile(link: any) {
  if (link) {
    let path = null;
    this.showWaitingLoading();
    if (this.platform.is('ios')) {
    path = cordova.file.documentsDirectory;
  } else {
    path = cordova.file.dataDirectory;
  }

  const transfer = this.transfer.create();
  const imageLocation = `${cordova.file.applicationDirectory}www/assets/csv/${link}`;

  transfer.download(imageLocation, path + link).then(entry => {
    this.dismissWaitingLoading();
    this.openFile(entry.toURL());
  }).catch(() => {
    this.dismissWaitingLoading();
    this.showToastMsg('error', "Something went wrong");
  })
 }

 /* ================= OPNE FILE FUNCTION ===========*/
 public openFile(path: any) {
  this.fileOpener.open(path, 'application/*')
   .then(() => console.log('File is opened'))
   .catch((e: any) => console.log('Error openening file', e));
 }

请尝试一下

答案 1 :(得分:2)

尝试使用Http get读取它并将其作为Blob编写,示例代码如下,

export class csvPage {
  csvData: any[] = [];
  headerRow: any[] = [];

  constructor(public navCtrl: NavController, 
    public navParams: NavParams,
    private http: Http) {
      this.readCsvData();
  }

  private readCsvData() {
    this.http.get('assets/dummyData.csv')
      .subscribe(
      data => this.extractData(data),
      err => this.handleError(err)
      );
  }

  private extractData(res) {
    let csvData = res['_body'] || '';
    let parsedData = papa.parse(csvData).data;

    this.headerRow = parsedData[0];

    parsedData.splice(0, 1);
    this.csvData = parsedData;
  }

  downloadCSV() {
    let csv = papa.unparse({
      fields: this.headerRow,
      data: this.csvData
    });

    // Dummy implementation for Desktop download purpose
    var blob = new Blob([csv]);
    var a = window.document.createElement("a");
    a.href = window.URL.createObjectURL(blob);
    a.download = "newdata.csv";
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  }

  private handleError(err) {
    console.log('something went wrong: ', err);
  }

}

答案 2 :(得分:1)

您可以使用库...此外,java.lang.NullPointerException at javax.faces.CurrentThreadToServletContext.getFallbackFactory(CurrentThreadToServletContext.java:79) at javax.faces.FactoryFinderInstance.getFactory(FactoryFinderInstance.java:551) at javax.faces.FactoryFinder.getFactory(FactoryFinder.java:283) at javax.faces.webapp.FacesServlet.init(FacesServlet.java:358) java.lang.NullPointerException at javax.portlet.faces.GenericFacesPortlet.getBridgeClassName(GenericFacesPortlet.java:193) at javax.portlet.faces.GenericFacesPortlet.getBridge(GenericFacesPortlet.java:762) at javax.portlet.faces.GenericFacesPortlet.init(GenericFacesPortlet.java:448) at com.liferay.portlet.InvokerPortletImpl.init(InvokerPortletImpl.java:297) 可以为您读取HttpClient的数据。

Blob

npm i file-saver

希望这会有所帮助:-)