WKWebView实现网页截图

实现思路一（推荐），iOS 11以上

1.保证在网页加载成功的前提下实施截图操作
2.截图之前将WKWebView控件的高度设置为scrollView.contentSize.height，保证不会因部分网页头部有固定模块而对接下来的截图造成困扰
3.根据预先自定义或业务规定好的截图的比例与scrollView.contentSize计算出可以截取的图片的数量，从而得知需要调用或循环几次截图操作，何时结束。
4.截图开始前将scrollView.contentOffset设置为zero，保证网页头部显示正常
5.从上到下，利用WKWebView的系统方法takeSnapshot(with:completionHandler:)截取图片，每次截图需设置好WKSnapshotConfiguration的rect属性，该属性是设置截取区域

Demo 地址：WKWebViewSnapshotDemo
该方法也可生成网页的单个图片，只需将WKSnapshotConfiguration的rect属性的size设置为scrollView.contentSize，执行一次截图操作即可。
缺点：iOS11以上，当然iOS11以下也可通过CoreGraphics写一个适用于UIView的截图方法进行替换
优点：可基本实现所见即所得

实现思路二

1.保证在网页加载成功的前提下实施截图操作
2.使用自定义UIPrintPageRenderer类结合WKWebView的viewPrintFormatter属性生成PDF文件

#import "CustomPDFPrintPageRenderer.h"

static const CGFloat A4_PAGE_WIDTH = 612.0;
static const CGFloat A4_PAGE_HEIGHT = 792.0;
static const CGFloat A4_PAGE_PADDING = 0.0;

@implementation CustomPDFPrintPageRenderer

- (CGRect)paperRect {
    return CGRectMake(0, 0, A4_PAGE_WIDTH, A4_PAGE_HEIGHT);
}

- (CGRect)printableRect {
    return CGRectInset(self.paperRect, A4_PAGE_PADDING, A4_PAGE_PADDING);
}

@end

- (NSData *)generatePDF {
    NSMutableData *pdfData = [[NSMutableData alloc] init];
    
    CustomPDFPrintPageRenderer *renderer = [[CustomPDFPrintPageRenderer alloc] init];
    [renderer addPrintFormatter:_webView.viewPrintFormatter startingAtPageAtIndex:0];
    
    UIGraphicsBeginPDFContextToData(pdfData, renderer.paperRect, nil);
    
    for (NSInteger i = 0; i < renderer.numberOfPages; i++) {
        UIGraphicsBeginPDFPage();
        [renderer drawPageAtIndex:i inRect:UIGraphicsGetPDFContextBounds()];
    }
    
    UIGraphicsEndPDFContext();
    
#if DEBUG
    NSString *path = [NSString stringWithFormat:@"%@/Documents/%@.pdf", NSHomeDirectory(), _urlTitle];
    NSLog(@"%@", path);
    NSURL *url = [NSURL fileURLWithPath:path];
    [pdfData writeToURL:url atomically:YES];
#endif
    
    return pdfData;
}

3.将生成的PDF通过CoreGraphics API 生成每一页的图片

缺点：存在部分网页生成PDF与手机端看到的不一样，部分网页生成PDF的内容缺失，部分网页生成PDF内容为空白等问题
优点：效果与Safari中生成的PDF效果一样

最后编辑于：2020.11.09 09:31:51