最近有做文件的預(yù)覽，在使用QuickLook的時(shí)候，對于Excel的展示不太符合預(yù)期，特此去搗鼓了一下，最終基本滿足了要求

1.Excel預(yù)覽問題

iOS文件預(yù)覽的方式有多種-QuickLook、WebView、UIDocument的方式；

我選擇了QuickLook框架去預(yù)覽，在手機(jī)上Word、PDF、PPT都還是效果很不錯(cuò)的，可Excel的展示就難以接受了。

先看下效果：

圖片.png

具體表現(xiàn)就是沒有撐滿，而且字很小，需要放大之后才能看的清，這對于用戶來說體驗(yàn)就差了。

2.Excel預(yù)覽優(yōu)化

嘗試1：能否設(shè)置一個(gè)縮放參數(shù)
試試看能不能對QLPreviewController的內(nèi)容設(shè)置個(gè)縮放，讓其能撐滿，但是查了API和文檔發(fā)現(xiàn)沒有可以設(shè)置的地方；

于是想看看圖層結(jié)構(gòu)來獲取到視圖(比如：ScrollView)然后來設(shè)置，結(jié)果使用Xcode去調(diào)試卻看不到圖層信息。

圖片.png

時(shí)間緊，就沒去深究了，換方案試試

嘗試2：修改預(yù)覽的方案改為WKWebView
改為WKWebView去展示的契機(jī)，是我將相同的文件發(fā)到微信，看了下微信的效果，蠻符合預(yù)期的。

于是就用Lookin去看了下微信的實(shí)現(xiàn)：

圖片.png

可以看到微信就是用WKWebView去加載Excel文件的，方向找到了，那就開始干吧。

于是很快啊改成WKWebView來加載Excel了，但是發(fā)現(xiàn)展示的效果跟QuickLook也沒啥區(qū)別的，看來微信是做了特殊處理了，于是就再次Debug了一下微信看看

圖片.png

發(fā)現(xiàn)不同的文件scrollView的zoomScale還不一樣，難不成還要解析Excel內(nèi)容來動態(tài)的設(shè)置這個(gè)zoomScale嗎，這咱也不會啊，感興趣的可以去逆向一下微信，看看微信的偽代碼是如何實(shí)現(xiàn)的。

我的初步想法就是設(shè)置一個(gè)固定的scale來試試效果：簡單來說就是給webview的scrollView設(shè)置一個(gè)zoomScale來讓展示的好看點(diǎn)，但是存在一個(gè)問題就是需要等Excel加載出來之后再設(shè)置zoomScale才會生效，這顯然不符合預(yù)期。

有沒有一個(gè)方法能直接在Excel渲染的時(shí)候就指定scale了？？

如果有那可太好了，于是就搜索了一下，后來發(fā)現(xiàn)確實(shí)可以有，通過注入script的方式就可以做到。

話不多說上代碼：

- (void)showPreview {
    NSString *jsString = @"var script = document.createElement('meta');"
    "script.name = 'viewport';"
    "script.content=\"width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes\";"
    "document.getElementsByTagName('head')[0].appendChild(script);";
    WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
    WKUserScript *userScript = [[WKUserScript alloc] initWithSource:jsString injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
    [configuration.userContentController addUserScript:userScript];
    WKWebView *previewWebView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:configuration];
    NSURL *accessURL = [[NSURL fileURLWithPath:self.fileLocalPath] URLByDeletingLastPathComponent];
    [previewWebView loadFileURL:[NSURL fileURLWithPath:self.fileLocalPath] allowingReadAccessToURL:accessURL];
    //NSURLRequest *request = [[NSURLRequest alloc] initWithURL:[NSURL fileURLWithPath:self.fileLocalPath]];
    //[previewWebView loadRequest:request];
    [self.view addSubview:previewWebView];
}

3.最終效果展示

基本上是跟微信的效果一樣

圖片.png