angular ionic移动端 文件打开预览

一、插件

我推荐的插件是File Opener，详细请在访问https://ionicframework.com/docs/native/file-opener

1. 首先在node里安装
   ionic cordova plugin add cordova-plugin-file-opener2
   npm install @ionic-native/file-opener
   2.引入
   import { FileOpener } from ‘@ionic-native/file-opener/ngx’;
   constructor(private fileOpener: FileOpener) { }

二、使用步骤

1.我的代码如下

 let request: DownloadRequest = {uri: this.apiUrl + url,title: e.riskAnnexName,description: '',mimeType: '',visibleInDownloadsUi: true,notificationVisibility: NotificationVisibility.VisibleNotifyCompleted,destinationInExternalFilesDir: {dirType: 'Downloads',subPath: e.riskAnnexName}}this.downloader.download(request).then((location: string) => {this.http.presentToast('下载成功，路径为' + location)//console.log(JSON.stringify(location));this.fileOpener.open(location,this.getFileMimeType(e.typeOf)).then(() => {//console.log('File is opened')}).catch(e => {//console.log('Error openening file', e)});})

下载成功后，打开相应的文件，这时候点击文件，手机就会访问是否打开相应的文件，选择软件。

2.配置相应的MimeType

代码如下（示例）：

 getFileMimeType(fileType: string): string {let mimeType: string = '';switch (fileType) {case 'txt':mimeType = 'text/plain';break;case 'docx':mimeType = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';break;case 'doc':mimeType = 'application/msword';break;case 'pptx':mimeType = 'application/vnd.openxmlformats-officedocument.presentationml.presentation';break;case 'ppt':mimeType = 'application/vnd.ms-powerpoint';break;case 'xlsx':mimeType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';break;case 'xls':mimeType = 'application/vnd.ms-excel';break;case 'zip':mimeType = 'application/x-zip-compressed';break;case 'rar':mimeType = 'application/octet-stream';break;case 'pdf':mimeType = 'application/pdf';break;case 'jpg':mimeType = 'image/jpeg';break;case 'png':mimeType = 'image/png';break;case 'gif':mimeType = 'image/gif';break;case 'avi':mimeType = 'video/x-msvideo';break;case 'mp4':mimeType = 'image/mp4';break;case 'webm':mimeType = 'image/webm';break;default:mimeType = 'application/' + fileType;break;}return mimeType;}

这是封装的函数，fileOpener.open()需要两个必填的参数，其他参数，可以Ctrl加左键，直接进入相应的TS，查看参数。若没有配置相应的MimeType,那可能打不开相应的文件，小伙伴需要注意自己下载的文件格式。