从服务器 ionic 4 下载文件时出错答案

【问题标题】：Error when downloading file from server ionic 4从服务器 ionic 4 下载文件时出错
【发布时间】：2021-02-07 21:11:39
【问题描述】：

我正在尝试从我的服务器下载文件，但我不断收到错误消息。被困了好几天。

HTML

<ion-button expand="block" (click)="download()">Download Files</ion-button>

download() {
    const url = 'http://ccoulter12.lampt.eeecs.qub.ac.uk/api/files/5d248f949c71e.pdf';
    const path = this.file.dataDirectory;
    const transfer = this.transfer.create();
    transfer.download(url, path + 'myfile.pdf').then(entry => {
      const url = entry.toURL();

      if (this.platform.is('ios')) {
        // this.document.viewDocument(url, 'application/pdf', {});
        window.open(url);
      } else {
        this.fileOpener.open(url, 'application/pdf')
        .then(() => console.log('File is opened'))
        .catch(e => console.log('Error opening file', e));
    }
      });
    }

【问题讨论】：

添加.catch(error => { console.log(error); } 以捕获来自transfer.download().. 的错误
完成我已编辑以包含错误消息

标签： angular file download ionic4 file-transfer

【解决方案1】：

你的答案就在那里，这是一个 CORS 问题。

我已经看到它出现在日志中，但我自己还没有经历过。

据我了解，这是您的服务器的问题，它需要在标头中授予权限才能以这种方式下载您的文件。

您需要研究如何在您的服务器上进行此 CORS 设置，这取决于所使用的技术。

官方博客对此问题有一个有趣的介绍：Handling CORS issues in Ionic | The Ionic Blog，虽然到目前为止我一直在猜测这个答案的方式（更多...推断，哈哈）有这个支持我说过：

处理 CORS 问题的最简单方法是最终要求您的 API 提供商允许所有主机。

【讨论】：

【解决方案2】：

在真机上试用。

download(id, fileName, name) {
  const url = environment.siteUrl+'down.php?down='+id;
    if (this.platform.is('cordova')) {
        this.file.checkDir(this.file.externalRootDirectory, 'downloads')
        .then(
            // Directory exists, check for file with the same name
            _ => this.file.checkFile(this.file.externalRootDirectory, 'downloads/' + fileName)
            .then(_ => { this.toastService.presentToast("A file with the same name already exists!")})
            // File does not exist yet, we can save normally
            .catch(err =>
                this.fileTransfer.download(url, this.file.externalRootDirectory + '/downloads/' + fileName).then((entry) => {
                     this.toastService.presentToast('File saved in:  ' + entry.nativeURL);
                })
                .catch((err) =>{
                     this.toastService.presentToast('Error saving file: ' + err.message);
                })
            ))
        .catch(
            // Directory does not exists, create a new one
            err => this.file.createDir(this.file.externalRootDirectory, 'downloads', false)
            .then(response => {
                 this.toastService.presentToast('New folder created:  ' + response.fullPath);
                this.fileTransfer.download(url, this.file.externalRootDirectory + '/downloads/' + fileName).then((entry) => {
                     this.toastService.presentToast('File saved in : ' + entry.nativeURL);
                })
                .catch((err) =>{
                     this.toastService.presentToast('Error saving file:  ' + err.message);
                });
        
            }).catch(err => {
                 this.toastService.presentToast('It was not possible to create the dir "downloads". Err: ' + err.message);
            })          
        );           

    }
}

【讨论】：