如何在不使用 FileTransfer 的情况下从 Ionic 5 中的 url 下载文件

Question

我目前正在开发 Ionic 应用程序并卡在文件下载部分。我看到很多帖子 FileTransfer 现在不推荐使用 cordova 库以支持 XHR 请求。

尽管我看到很多帖子说该库已被弃用，但我找不到任何示例代码（用于从 URL 下载文件）。

任何人都可以建议我在不使用 FileTransfer 插件的情况下从 url 下载文件的好方法吗？

Answer 1

您可以通过以下步骤实现：

第 1 步：下载函数URL

downloadFile(path: string, body: Object = {}): Observable<any> {
  let headers = {} // add authentication headers and other headers as per your requirement
  return this.http.post/get( 
    `${path}`, body, { headers: headers, withCredentials: true }
  )
  .catch((err) =>console.log(err))
  .map((res:Response) => res)
  .finally( () => { });
}

第2步：使用下载功能将其转换成合适的Blob。

this.downloadFile(`url`, postData).subscribe(
 res => {
   let options = { type: ‘filetype’ };
   let filename = ‘filename.type’;
   Util.createAndDownloadBlobFile(res._body, options, filename);
 },
 err => {
   // show the error
 }
);

步骤 3：使用以下插件将 Blob 数据保存在设备上 https://github.com/apache/cordova-plugin-file

Answer 2

从其他服务器下载文件可能会导致恼人的 CORS 错误，这在很大程度上超出了我们的控制范围。最安全的方法是绕过 Webview 并本地下载文件。您可以使用 Native HTTP 插件

在 Ionic 4 或更高版本中的使用如下所示：

import { Component } from '@angular/core';
import { HTTP } from '@ionic-native/http/ngx';
import { File } from '@ionic-native/file/ngx';
        
@Component({
   selector: 'app-home',
   templateUrl: './you-file.html',
   styleUrls: ['./your-file.scss'],
})

export class HomePage {
    constructor(private nativeHTTP: HTTP, private file: File) {}
        
     private downloadFileAndStore() {
        //
        const filePath = this.file.dataDirectory + fileName; 
                         // for iOS use this.file.documentsDirectory
        
        this.nativeHTTP.downloadFile('your-url', {}, {}, filePath).then(response => {
           // prints 200
           console.log('success block...', response);
        }).catch(err => {
            // prints 403
            console.log('error block ... ', err.status);
            // prints Permission denied
            console.log('error block ... ', err.error);
        })
     }
  }
}

Answer 3

您可以用 window 打开 url。但这将打开一个浏览器并且在那里下载文件。虽然它不漂亮，但它会起到作用：

your.page.ts:

function download(url){
  window.open(url, "_blank");
}

your.html:

<a href="javascript:void(0)" (click)="download(yourUrl)">Your file name</>

Answer 4

这是我用于react的解决方案，下载文件MP4并保存在缓存或文件中，文件系统用于电容器。

const bob = await fetch(url).then((x) => x.blob());
       const base64 = await convertBlobToBase64(bob);

    const resultSaveFile = await Filesystem.writeFile({
        data: base64,
        path: 'video-edit.mp4',
        directory: directory || Directory.Cache,
        recursive: true,
      });

Answer 5

您可以简单地使用 HttpClient class (@angular/common/http) 如下：

const downloadPath = (
   this.platform.is('android')
) ? this.file.externalDataDirectory : this.file.documentsDirectory;


let vm = this;

/** HttpClient - @angular/common/http */
this.http.get(
   uri, 
   {
      responseType: 'blob', 
      headers: {
         'Authorization': 'Bearer ' + yourTokenIfYouNeed,
      }
   }
).subscribe((fileBlob: Blob) => {
   /** File - @ionic-native/file/ngx */
   vm.file.writeFile(downloadPath, "YourFileName.pdf", fileBlob, {replace: true});
});

您需要的进口商品：

import { HttpClient } from '@angular/common/http';
import { File } from '@ionic-native/file/ngx';

如何在不使用 FileTransfer 的情况下从 Ionic 5 中的 url 下载文件

How to download file from url in Ionic 5 without using FileTransfer

typescript

file

ionic-framework

ionic-native