iOS使用pdf.js打开PDF文件

最近研究了下iOS打开PDF文件的方式，由于项目需要在浏览PDF文件时能使用HTML格式文件，调研了一下iOS中打开PDF文件的几种方式，发现pdf.js开源库可以做到这一点，通过调用js在线预览PDF文件，预览时将PDF文件转为HTML标签，而且集成方便。

pdf.js是火狐浏览器的开源项目，github地址为：https://github.com/mozilla/pdf.js 。

教程中把pdf.js作为服务端的步骤：

• clone工程到本地：

$ git clone git://github.com/mozilla/pdf.js.git
$ cd pdf.js

• 安装node.js,然后安装gulp工具(若已有可跳过)：

$ npm install --global gulp-cli

• 在pdf.js工程目录里执行：

$ npm install -g gulp-cli

• 安装好gulp之后在源代码使用npm安装模块：

$ npm install

• 启动gulp构建本地服务器:

$ gulp server

• 然后就可以看到如下图：

  
  
  

• 然后访问http://localhost:8888/web/viewer.html 就可以看到如下图：
  

  

将pdf.js集成到iOS工程中的步骤：

• 构建pdf.js：

$ gulp generic

• 可以看到在如下图目录中有generic文件夹，里面的内容即是我们需要集成到iOS项目中的：

  
  
  

• generic文件夹大小为8.8MB，如果你觉得把这个文件夹导入到项目中太大了的话，你可以使用如下命令：

$ gulp minified

• 可以看到在如下图目录中有minified文件夹，大小为8MB：

  
  
  

• 如果你觉得8MB还是特别大的话，你可以删掉一些文件，只保留最重要的js文件，删除后的文件目录如下图，大小为1.3MB：

  
  
  
  
  
  

• 上述三种方式得到的目录下的文件即为需要导入到iOS工程中的，如果对文件大小要求苛刻，可以使用删减后的minified目录，如果对文件大小没那么苛刻，可以导入generic，删减后的可能稳定性不如原版本，我在测试的时候发现删减后的目录在连接safari调试的时候会崩溃，其他问题尚未发现；

• 新建iOS工程，将minified或者generic复制到工程目录中：

  
  
  

• 拖拽复制的文件目录到工程中，选择folder references（亲测选择groups没有效果，原因未知）：

  
  
  

• 新建PDFWebView继承自UIWebView，添加如下代码：

 - (void)loadPDFFile:(NSString*)filePath {
    _filePath = filePath;
  
    NSString *viwerPath = [[NSBundle mainBundle] pathForResource:@"viewer" ofType:@"html" inDirectory:@"minified/web"];
    NSString *urlStr = [NSString stringWithFormat:@"%@?file=%@#page=1",viwerPath,filePath];
    urlStr = [urlStr stringByAddingPercentEncodingWithAllowedCharacters:[NSCharacterSet URLQueryAllowedCharacterSet]];
    NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:urlStr]];
    [self loadRequest:request];
}

• 在控制器里添加如下代码：

- (void)viewDidLoad {
    [super viewDidLoad];
    
    PDFWebView *webView = [[PDFWebView alloc] initWithFrame:self.view.bounds];
    [self.view addSubview:webView];
    NSString *pdfFilePath = [[NSBundle mainBundle] pathForResource:@"git搭建" ofType:@"pdf"];
    [webView loadPDFFile:pdfFilePath];
}

• 运行后效果如图：

  
  
  

• 以上就是把pdf.js导入iOS工程的全部步骤，demo地址：https://github.com/buptlilu/PDFJSReader

参考资料

• Android 实现 PDF 文件阅读功能调研

• java集成pdf.js实现pdf文件在线预览

• PDFSearch