iOS 加载PDF问题无法显示电子章问题

背景

公司项目中需要显示订单合同PDF文件。正常情况下，加载pdf文件直接通过UIWebView或者WKWebView就可以。不过实际情况中，PDF文件如果存在电子签名（签章）的话，直接通过webView是无法查看到电子签名（签章）的。可以写个简单的demo对 http://blogs.adobe.com/security/SampleSignedPDFDocument.pdf 这个pdf文件进行查看对比：

• 通过PC浏览器查看: 有电子签名

通过Safari浏览器查看.png

• 通过iOS WebView加载地址查看: 无电子签名，并且有一部分内容丢失

通过iOS WebView加载地址查看.png

解决办法：

之前直接使用WKWebview加载pdf地址来处理的，具体实现是通过远端的pdfviewer（可以理解为web端的pdf查看页面）拼接 pdf 的url 路径来加载的，大概如下：

// 由于pdf文件中含有电子签章，如果直接通过pdf文件地址进行加载，会无法显示签章内容，需要进行解析
let pdfViewerUrl = "https://example.xxxx.cc/PDFWebSign/web/showPdf.html"  //后台提供的pdf文件解析地址
let pdfFileUrl = "https://example.xxxx.cc/pdf/2bf949849dd048b28123asd123_sign.pdf"//pdf文件实际地址

// https://example.xxxx.cc/PDFWebSign/web/showPdf.html?file=https://example.xxxx.cc/pdf/2bf949849dd048b28123asd123_sign.pdf&isView=true&fileUrl=https://example.xxxx.cc/pdf/2bf949849dd048b28123asd123_sign.pdf
let urlString = "\(pdfViewerUrl)?file=\(pdfFileUrl)isView=true&fileUrl=\(pdfFileUrl)" 
let urlRequest = URLRequest(url: URL(string: urlString)!)

webView.loadRequest(urlRequest)

不过由于存在跨域问题，需要进行cookie的注入操作，并且从远端进行解析加载pdf速度一直很慢，所有想尝试其他的方法。

调研过程略...
调研相关链接：
iOS展示pdf签名时遇到的问题及解决办法
iOS实现PDF阅读功能调研

最终方案：

通过pdf.js加载

接入教程直接参照： iOS使用pdf.js打开PDF文件

参照上面的步骤介入后发现还是无法显示电子签名（签章） 在查看 pdf.js 上的issue后发现有相关issue 如下：

• #9522
• #1076
• #4202
• #4743

其中 #4743 中Osukaru 提出了解决方案：
在 src/core/annotation.js第601行（当前版本）中

    // Hide unsupported Widget signatures. 注释掉if中的内容即可显示电子签章
    if (data.fieldType === 'Sig') {
      warn('unimplemented annotation type: Widget signature');
      this.setFlags(AnnotationFlag.HIDDEN);
    }

(后面查询过程中发现在 使用PDF.js如何显示pdf文件的电子签章 中也提到同样的解决办法。)

将 clone 下来的 pdf.js 中 src/core/annotation.js 文件修改后按照iOS使用pdf.js打开PDF文件
重新构建执行

gulp generic

再接入到工程项目中即可,最终效果：
注意，这里没有使用上面提供的 http://blogs.adobe.com/security/SampleSignedPDFDocument.pdf 进行验证，是因为在运行过程中会crash，并抛出 WebActionDisablingCALayerDelegate willBeRemoved]: unrecognized selector sent 错误

最终效果.png