如何在iOS WKWebView上加载带有pdf的html文件

Question

在我的项目中，我正在使用PDFJS 库。我正在UIWebView 上加载本地 pdf。但这会占用大量 RAM 内存，并且有时会崩溃。为了避免这种情况，我想使用WKWebView。

在UIWebview，我是这样使用的（self指UIView的子类）

UIWebView *uiWebview = [[UIWebView alloc] initWithFrame:self.frame];
[self addSubview:uiWebview];
NSString *filePath = [[NSBundle mainBundle] pathForResource:@"swift_tutorial" ofType:@"pdf"];
NSString *sPath = [[NSBundle mainBundle] pathForResource:@"viewer" ofType:@"html" inDirectory:@"PDFJS/web"];
NSString *finalPath = [NSString stringWithFormat:@"%@?file=%@#page=1",sPath,filePath];
self.urlRequest = [NSURLRequest requestWithURL:[NSURL URLWithString:finalPath]];
[uiWebview loadRequest:self.urlRequest];

当我在上面的sn-p中打印finalPath时，控制台输出为/var/containers/Bundle/Application/DF419672-CF14-4B60-BE4F-EC0AC07C23AE/WebviewPOC.app/PDFJS/web/viewer.html?file=/var/containers/Bundle/Application/DF419672-CF14-4B60-BE4F-EC0AC07C23AE/WebviewPOC.app/swift_tutorial.pdf#page=1

在WKWebView, loadFileURL, loadHTMLString 方法可以用来加载本地html文件或本地pdf文件，效果很好。但不是两者兼而有之。对于这个html文件，如何追加本地pdf路径并加载到WKWebView中？

任何帮助表示赞赏。

Answer 1

让我回答我自己的问题。

我使用WKWebViewLocal 库来创建本地主机服务器。 现在，这将创建通过主机名访问本地文件。使用这种方法，应用程序的内存利用率得到了很多优化（仅因为 WKWebView）。

NSString *filePath = [[NSBundle mainBundle] pathForResource:@"swift_tutorial" ofType:@"pdf"];    
NSString *htmlPath = [[NSBundle mainBundle] pathForResource:@"viewer" ofType:@"html" inDirectory:@"PDFJS/web"];
NSString *finalPath = [NSString stringWithFormat:@"http://localhost:8080%@?file=%@#page=1",htmlPath, filePath];
NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:finalPath]];
[self.webView loadRequest:request];

现在，最终路径将是

http://localhost:8080/~~~~~~~/PDFJS/web/viewer.html?file=/Users/~~~~~~/swift_tutorial.pdf#page=1

Answer 2

因为 Apple 会拒绝使用 UIWebView API 的应用程序，所以我在从 UIWebView 迁移到 WKWebView 时遇到了同样的问题。但是由于我使用的是 Xamarin 框架，所以我不能使用 WKWebViewLocal 库。我的解决方案非常相似。

首先你需要在你的 CustomRenderer for WKWebView 的 OnElementChanged 方法中添加这段代码：

Control.Configuration.Preferences.SetValueForKey(NSObject.FromObject(true), new NSString("allowFileAccessFromFileURLs"));

它将访问此控件的文件。没有它，pdfjs 将无法加载文档，并且总是显示为空。

那你需要修改读取文件的代码：

_pdfViewerAddress = (NSString)NSBundle.PathForResourceAbsolute("pdfjs/web/viewer", "html", NSBundle.MainBundle.ResourcePath);

if (UsePDFJS)
                {
                    var pdfjsUrlString = $"file://{_pdfViewerAddress}";
                    var pdfjsUrl = new NSUrl(pdfjsUrlString);

                    var docUrlString = $"file://{GetDocumentUrl()}";
                    var docFolderUrlString = new NSUrl($"file://{Element.PathWithoutFileName}");

                    var finalUrl = new NSUrl($"{pdfjsUrl}?file={docUrlString}#page=1");

                    Control.LoadFileUrl(finalUrl, docFolderUrlString);
                }
                else
                {
                    var error = new NSError();
                    var documentDirUrl = NSFileManager.DefaultManager.GetUrl(NSSearchPathDirectory.DocumentDirectory, NSSearchPathDomain.User, null, false, out error);
                    var dotsFolderUrl = documentDirUrl.Append("..", true);
                    var libFolderUrl = dotsFolderUrl.Append("Library", true);
                    var tempFolderUrl = libFolderUrl.Append("TemporaryFiles", true);
                    var fileUrl = new NSUrl($"file://{GetDocumentUrl()}");

                    Control.LoadFileUrl(fileUrl, tempFolderUrl);
                }

如果使用 pdfjs finalUrl 应该是这样的：

file:///private/var/containers/Bundle/Application/80424409-E164-4409-A72B-43B32EC51F1A/iOS.app/pdfjs/web/viewer.html?file=file:///var/mobile/Containers/Data/Application/ED7233AE-8D10-41DC-8AF4-10662F14A883/Documents/../Library/TemporaryFiles/10850908.pdf#page=1

就是这样。不需要外部库。如果您想从 BundleResources 打开文档，这也适用。您可以使用以下代码轻松访问它：

(NSString)NSBundle.PathForResourceAbsolute("Guide", "pdf", NSBundle.MainBundle.ResourcePath);