从另一个服务器下载文件可能会导致恼人的CORS错误，这在很大程度上超出了我们的控制。最安全的方法是绕过Webview并以本地方式下载文件。您可以使用本地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);
        })
     }
  }
}

你可以直接用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</>

这是我用于React的解决方案，下载文件MP4并保存该高速缓存或文档，Filesystem是电容器.

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

您可以简单地使用HttpClient类（@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';

为了能够通过ionic-native File下载和查看文件，我必须在Xcode中添加额外的设置：

• 配置.xml*

<preference name="iosPersistentFileLocation" value="Library" />

• 信息列表 *

<key>UIFileSharingEnabled</key> <true/>
<key>LSSupportsOpeningDocumentsInPlace</key> <true/>

下载路径应为File.documentsDirectory

您可以通过以下步骤实现此目的：

步骤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