如何使用离子原生文件打开器打开（doc、ppt、xlsx、pdf、jpg、png）文件

Question

我正在使用 ionic 开发混合应用程序。我想使用离子原生文件打开器插件从设备内部或外部存储打开（doc、ppt、xlsx、pdf、jpg、png）文件，但我只能使用以下代码打开 pdf 文件。我使用 application/pdf 打开 pdf，打开其他文件我应该在 application/pdf 的位置替换什么？ 请帮我。 谢谢。

import { FileOpener } from '@ionic-native/file-opener';

constructor(private fileOpener: FileOpener) { }

...

this.fileOpener.open('path/to/file.pdf', 'application/pdf')
  .then(() => console.log('File is opened'))
  .catch(e => console.log('Error openening file', e));

Answer 1

您必须在 file:/// 之后使用，因为在 sdk 16 之后它只接受 没有 file:/// 路径

let path = "your path (file:///storage/emulated/0/)"; 
let tempVal = path.split('///');

this.fileOpener.open(tempVal[1] + this.qrImgName + '.jpg', 'image/jpeg')
  .then(() => console.log('File is opened'))
  .catch(e => console.log('Error opening file', e));

这里，tempval 包含“file:///”之后的路径，所以它看起来像 storage/emulated/0/ 和qrImgName 是包含您实际要打开的图像名称的变量。

所以最后打开的 url 看起来像 "storage/emulated/0/imagename.jpg"

Answer 2

好的，我在提供程序文件夹中创建了一个file-extension.ts 文件，其中包含大量扩展名以及相应的标题。下面是它的代码（取自Mozilla Docs，见here for full reference）：

文件扩展名.ts：

export const FILE_EXTENSION_HEADERS = {
    'aac' : 'audio/aac',
    'abw' : 'application/x-abiword',
    'arc' : 'application/x-freearc',
    'avi' : 'video/x-msvideo',
    'azw' : 'application/vnd.amazon.ebook',
    'bin' : 'application/octet-stream',
    'bmp' : 'image/bmp',
    'bz' : 'application/x-bzip',
    'bz2' : 'application/x-bzip2',
    'csh' : 'application/x-csh',
    'css' : 'text/css',
    'csv' : 'text/csv',
    'doc' : 'application/msword',
    'docx' : 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
    'eot' : 'application/vnd.ms-fontobject',
    'epub' : 'application/epub+zip',
    'gif' : 'image/gif',
    'htm' : 'text/html',
    'html' : 'text/html',
    'ico' : 'image/vnd.microsoft.icon',
    'ics' : 'text/calendar',
    'jar' : 'application/java-archive',
    'jpeg' : 'image/jpeg',
    'jpg' : 'image/jpeg',
    'js' : 'text/javascript',
    'json' : 'application/json',
    'jsonld' : 'application/ld+json',
    'mid' : 'audio/midi',
    'midi' : 'audio/midi',
    'mjs' : 'text/javascript',
    'mp3' : 'audio/mpeg',
    'mpeg' : 'video/mpeg',
    'mpkg' : 'application/vnd.apple.installer+xml',
    'odp' : 'application/vnd.oasis.opendocument.presentation',
    'ods' : 'application/vnd.oasis.opendocument.spreadsheet',
    'odt' : 'application/vnd.oasis.opendocument.text',
    'oga' : 'audio/ogg',
    'ogv' : 'video/ogg',
    'ogx' : 'application/ogg',
    'otf' : 'font/otf',
    'png' : 'image/png',
    'pdf' : 'application/pdf',
    'ppt' : 'application/vnd.ms-powerpoint',
    'pptx' : 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
    'rar' : 'application/x-rar-compressed',
    'rtf' : 'application/rtf',
    'sh' : 'application/x-sh',
    'svg' : 'image/svg+xml',
    'swf' : 'application/x-shockwave-flash',
    'tar' : 'application/x-tar',
    'tif' : 'image/tiff',
    'tiff' : 'image/tiff',
    'ttf' : 'font/ttf',
    'txt' : 'text/plain',
    'vsd' : 'application/vnd.visio',
    'wav' : 'audio/wav',
    'weba' : 'audio/webm',
    'webm' : 'video/webm',
    'webp' : 'image/webp',
    'woff' : 'font/woff',
    'woff2' : 'font/woff2',
    'xhtml' : 'application/xhtml+xml',
    'xls' : 'application/vnd.ms-excel',
    'xlsx' : 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    'xml' : 'application/xml ',
    'xul' : 'application/vnd.mozilla.xul+xml',
    'zip' : 'application/zip',
    '3gp' : 'video/3gpp',
    '3g2' : 'video/3gpp2',
    '7z' : 'application/x-7z-compressed' 
};

• 后来在我的提供程序文件中导入了这个，并创建了一个方法让这个应用程序范围内可用。

APIService.ts：

import { FILE_EXTENSION_HEADERS } from './file_extension_headers';


@Injectable()
export class APIService{
  /* some other methods */

    fetchFileHeader(extension){
        extension = extension.toLowerCase();
        return FILE_EXTENSION_HEADERS[extension] !== undefined ? FILE_EXTENSION_HEADERS[extension] : 'text/plain';// default if no appropriate header is found
    }
}

• 请注意发送适当的标头仍然很可能无法打开文件。在这种情况下，您需要在移动设备上安装适当的应用程序才能打开此类文件。

Answer 3

我终于找到了解决办法。

let fileExtn=file_name.split('.').reverse()[0];
let fileMIMEType=this.getMIMEtype(fileExtn);
         this.fileOpener.open("file:///storage/emulated/0/download/"+ file_name+"", fileMIMEType)
                .then(() => console.log('File is opened'))
                .catch(e => console.log('Error openening file', e));

为 MIMEtype 制作其他函数

getMIMEtype(extn){
  let ext=extn.toLowerCase();
  let MIMETypes={
    'txt' :'text/plain',
    'docx':'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
    'doc' : 'application/msword',
    'pdf' : 'application/pdf',
    'jpg' : 'image/jpeg',
    'bmp' : 'image/bmp',
    'png' : 'image/png',
    'xls' : 'application/vnd.ms-excel',
    'xlsx': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    'rtf' : 'application/rtf',
    'ppt' : 'application/vnd.ms-powerpoint',
    'pptx': 'application/vnd.openxmlformats-officedocument.presentationml.presentation'
  }
  return MIMETypes[ext];
}