Ionic3中从Amazon S3 URL下载PDF文件的问题求助

兄弟，你之前用Storage.get()的路子完全错啦！这个API是Ionic用来操作本地键值对存储的，压根不是用来下载远程文件的，咱们换正确的方法来搞定这个需求：

情况1：浏览器端直接下载 #

如果你的App是在浏览器里运行，咱们可以用最直接的方式——创建隐藏的<a>标签触发浏览器的下载功能：

1. 先确认你的S3文件URL是公开可访问的，要是私有文件的话，得用带有效签名的预签名URL（这个一般后端生成了给前端）。
2. 在你的页面.ts文件里加这个方法：

downloadPdfInBrowser(s3Url: string) {
  const downloadLink = document.createElement('a');
  downloadLink.href = s3Url;
  downloadLink.target = '_blank';
  // 这里可以自定义下载后的文件名
  downloadLink.download = 'test.pdf';
  document.body.appendChild(downloadLink);
  downloadLink.click();
  // 用完就删掉这个临时标签
  document.body.removeChild(downloadLink);
}

3. 然后在按钮点击事件里调用就行：

onDownloadBtnClick() {
  const s3PdfUrl = '你的S3文件完整URL';
  this.downloadPdfInBrowser(s3PdfUrl);
}

情况2：移动设备（iOS/Android）下载到本地存储 #

要是打包成App跑在手机上，就得用Cordova的文件下载插件了，步骤如下：

第一步：安装必要插件 #

在项目根目录执行这两条命令：

ionic cordova plugin add cordova-plugin-file cordova-plugin-file-transfer
npm install @ionic-native/file @ionic-native/file-transfer --save

第二步：在App模块里注册插件 #

打开app.module.ts，导入并添加到providers数组：

import { File } from '@ionic-native/file';
import { FileTransfer } from '@ionic-native/file-transfer';

@NgModule({
  // ...其他配置
  providers: [
    // ...其他服务
    File,
    FileTransfer
  ]
})
export class AppModule {}

第三步：实现设备端下载逻辑 #

在你的页面.ts文件里注入File和FileTransfer，然后写下载方法：

import { File } from '@ionic-native/file';
import { FileTransfer, FileTransferObject } from '@ionic-native/file-transfer';

constructor(private transfer: FileTransfer, private file: File) {}

downloadPdfOnDevice(s3Url: string) {
  const fileTransfer: FileTransferObject = this.transfer.create();
  // 配置文件存储路径：Android存在外部下载目录，iOS存在Documents目录
  const targetPath = this.file.externalRootDirectory + 'Download/test.pdf'; // Android路径
  // iOS可以用：this.file.documentsDirectory + 'test.pdf';

  fileTransfer.download(s3Url, targetPath, true)
    .then((entry) => {
      console.log('PDF下载成功！路径：', entry.toURL());
      // 这里可以加个Toast提示用户下载完成
    })
    .catch((error) => {
      console.error('下载失败了：', error);
      // 处理错误，比如网络问题、权限不足等
    });
}

同样在按钮点击事件里调用：

onDownloadBtnClick() {
  const s3PdfUrl = '你的S3文件完整URL';
  this.downloadPdfOnDevice(s3PdfUrl);
}

几个关键注意点 #

• 私有S3文件必须用预签名URL，普通私有链接直接访问会被拒绝，这个得后端帮忙生成。
• 移动设备上要确保App有文件读写权限：Android旧版本需要在AndroidManifest.xml加<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />，新版本Android得动态申请权限。
• 设备端的逻辑一定要在真机或模拟器上测试，浏览器里跑不了Cordova插件。

内容的提问来源于stack exchange，提问作者Wasim