如何在Ionic 3中读取设备本地存储的TXT文件并在应用内展示

我来帮你搞定这个问题——在Ionic 3里直接读取本地下载文件夹的TXT文件，并且在应用内展示内容，不用跳转外部编辑器。你之前用FileChooser+FileOpener会跳外部应用，直接用File模块出错，大概率是路径处理错误或者权限配置不全导致的，下面是完整的实操方案：

一、先安装并配置所需插件 #

你需要三个核心插件：File（用于文件读写）、FileChooser（用于选择本地文件）、FilePath（用于转换Android的content://路径为真实文件路径），如果是Android 6.0+还需要权限申请插件：

安装命令 #

# 核心插件
ionic cordova plugin add cordova-plugin-file
ionic cordova plugin add cordova-plugin-filechooser
ionic cordova plugin add cordova-plugin-filepath
npm install @ionic-native/file @ionic-native/file-chooser @ionic-native/file-path --save

# Android权限申请插件（可选但推荐）
ionic cordova plugin add cordova-plugin-android-permissions
npm install @ionic-native/android-permissions --save

在AppModule中配置 #

打开src/app/app.module.ts，导入这些插件并添加到providers数组：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

// 导入所需插件
import { File } from '@ionic-native/file/ngx';
import { FileChooser } from '@ionic-native/file-chooser/ngx';
import { FilePath } from '@ionic-native/file-path/ngx';
import { AndroidPermissions } from '@ionic-native/android-permissions/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    // 添加到providers
    File,
    FileChooser,
    FilePath,
    AndroidPermissions
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

二、编写组件逻辑（以HomePage为例） #

在你的页面组件中，实现“选择文件→转换路径→读取内容→展示”的完整流程：

TypeScript代码 #

import { Component } from '@angular/core';
import { File } from '@ionic-native/file/ngx';
import { FileChooser } from '@ionic-native/file-chooser/ngx';
import { FilePath } from '@ionic-native/file-path/ngx';
import { AndroidPermissions } from '@ionic-native/android-permissions/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
})
export class HomePage {
  fileContent: string = ''; // 用于存储文件内容

  constructor(
    private file: File,
    private fileChooser: FileChooser,
    private filePath: FilePath,
    private androidPermissions: AndroidPermissions
  ) {}

  // 点击按钮触发的方法
  selectAndReadFile() {
    // 先检查/申请Android存储权限
    this.androidPermissions.checkPermission(this.androidPermissions.PERMISSION.READ_EXTERNAL_STORAGE)
      .then(result => {
        if (result.hasPermission) {
          this.performFileSelection(); // 有权限就执行文件选择
        } else {
          // 申请权限
          this.androidPermissions.requestPermission(this.androidPermissions.PERMISSION.READ_EXTERNAL_STORAGE)
            .then(() => this.performFileSelection())
            .catch(err => {
              console.error('权限申请失败:', err);
              alert('需要读取存储权限才能访问本地文件，请允许权限');
            });
        }
      })
      .catch(err => console.error('权限检查出错:', err));
  }

  // 核心的文件选择与读取逻辑
  private performFileSelection() {
    this.fileChooser.open() // 打开文件选择器
      .then(uri => {
        // Android下把content://格式的uri转成真实文件路径
        return this.filePath.resolveNativePath(uri);
      })
      .then(fileFullPath => {
        // 拆分路径和文件名
        const fileDir = fileFullPath.substring(0, fileFullPath.lastIndexOf('/'));
        const fileName = fileFullPath.substring(fileFullPath.lastIndexOf('/') + 1);
        
        // 读取TXT文件内容（默认UTF-8编码，其他编码可加第三个参数，比如'GBK'）
        return this.file.readAsText(fileDir, fileName);
      })
      .then(content => {
        this.fileContent = content; // 把内容赋值给变量，用于页面展示
        console.log('文件读取成功:', content);
      })
      .catch(err => {
        console.error('文件读取失败:', err);
        alert('读取文件出错，请确认文件是TXT格式，且路径正确');
      });
  }
}

HTML页面代码 #

在页面中添加选择按钮和内容展示区域：

<ion-header>
  <ion-toolbar>
    <ion-title>本地TXT阅读器</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <!-- 选择文件按钮 -->
  <ion-button (click)="selectAndReadFile()" expand="block" color="primary">
    选择本地TXT文件
  </ion-button>

  <!-- 文件内容展示区域 -->
  <ion-card *ngIf="fileContent" style="margin-top: 20px;">
    <ion-card-header>
      <ion-card-title>文件内容</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <pre style="white-space: pre-wrap;">{{ fileContent }}</pre>
    </ion-card-content>
  </ion-card>
</ion-content>

三、权限与平台配置 #

Android配置 #

在platforms/android/app/src/main/AndroidManifest.xml中添加存储权限：

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

iOS配置 #

在platforms/ios/[你的App名称]/Info.plist中添加文件访问权限描述：

<key>NSDocumentsFolderUsageDescription</key>
<string>需要访问文档文件夹以读取本地TXT文件</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>需要访问相册以读取本地文件</string>

四、常见问题排查 #

1. File模块报错“File not found”：大概率是直接用了FileChooser返回的content://路径，没有用FilePath转换为真实路径，Android必须转换后才能读取。
2. 中文乱码：如果TXT文件是GBK编码，在readAsText方法中添加第三个参数：this.file.readAsText(fileDir, fileName, 'GBK')。
3. 权限被拒绝：确保动态申请了权限，并且用户允许了存储权限。

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