为了实现PPT 转 图片功能, 首先来看下,iOS系统 有哪些API可以实现PPT预览功能;
iOS 预览PPT 3种方式:
1. UIWebView / wkwebView
通过 UIWebView 或 wkwebView 可以简单实现PPT 或 office 系列文档的预览功能,代码如下,非常简单:
NSString * filePath = [[NSBundle mainBundle] pathForResource:@"IOS.pptx" ofType:nil];
NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL fileURLWithPath:pptFileUrl]];
//...webView 创建省略...
[self.webView loadRequest:request];
2. QLPreveiewController
QLPreveiewController 是IOS4.0后，apple推出新的文件预览控件,可以实现在线预览ppt，word，excel，pdf等文件的功能, 使用方法同UITableViewController 类似,创建一个控制器继承QLPreveiewController, 并实现其数据源方法,代码如下:
// .h
#import <UIKit/UIKit.h>
#import <QuickLook/QuickLook.h>
@interface TestViewController : QLPreviewController
@end
// .m
#import "TestViewController.h"
@interface TestViewController ()<QLPreviewControllerDataSource,QLPreviewControllerDelegate>
@end
@implementation TestViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.dataSource = self;
self.delegate = self;
}
- (NSInteger)numberOfPreviewItemsInPreviewController:(QLPreviewController *)controller{
return 1;
}
- (id <QLPreviewItem>)previewController: (QLPreviewController *)controller previewItemAtIndex:(NSInteger)index{
NSString * filePath = [[NSBundle mainBundle] pathForResource:@"IOS.pptx" ofType:nil];
return [NSURL fileURLWithPath:filePath];
}
@end
3.UIDocumentInteractionController
UIDocumentInteractionController是从ios 3.2的sdk开始支持的，他是直接继承自NSObject，因此需要UIDocumentInteractionController提供的方法来展示他, 使用方法也极其简单,需要实现 <UIDocumentInteractionControllerDelegate>协议, 代码如下;
- (void)viewDidLoad {
[super viewDidLoad];
NSString * filePath = [[NSBundle mainBundle] pathForResource:@"IOS.pptx" ofType:nil];
UIDocumentInteractionController *documentController = [UIDocumentInteractionController interactionControllerWithURL:[NSURL fileURLWithPath:filePath]];
documentController.delegate = self;
[documentController presentPreviewAnimated:YES];
}
- (UIViewController *)documentInteractionControllerViewControllerForPreview:(UIDocumentInteractionController *)controller{
return self;
}
上述3种方法,都可以实现PPT等文档的本地查看预览功能, 方法2和方法3,再带有分享分档功能,使用起来都很简单, 接下来我们介绍一下如何将PPT转图片:
PPT 转 Image
问题分析:
虽然 iOS 为我们提供了多种本地查看预览PPT的功能模块, 但是上述的3种方式,系统都没有提供什么附加信息用于获取每一页PPT的信息,更谈不上转图片了.
WebView 在展示PPT的时候, WebView会将PPT转为相应的HTML代码,然后在放入 WebView 进行展示, 我们可以看一下生成的 html 代码,通过运行JS代码,可以获取页面的HTML代码 :
运行如下代码,即可获取页面的 html 代码信息:
[self.webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.innerHTML"]
获取到得 html 信息如下, 只粘贴了部分结构:
<!-- 页面一 -->
<div class="slide" style="top:0; left:0;">
<div class="s0"></div><img
src="x-apple-ql-id://1F090401-1846-46C8-863A-5DC9BAA53ED7/x-apple-ql-magic/A979BC4A-42E4-4823-9CB0-8CF19D91D4D2.jpg"
style="position:absolute; top:22; left:84; width:792; height:495;">
</div>
<!-- 页面二 -->
<div class="slide" style="top:0; left:0;">
<div class="s0"></div>
<div style="position:absolute; top:32; left:49; width:861; height:423;">
<div class="s2">
<div class="s1">
<p style="text-align:center; line-height:3.120000; padding-bottom:0px; font-family:"(null)"; font-size:44;">
<span style="color:#000000; font-size:44; font-family:"(null)";">hello.world!</span>
</p>
</div>
</div>
</div>
</div>
<!-- 页面三 -->
<div class="slide" style="top:0; left:0;">
<div class="s0"></div>
<div style="position:absolute; top:21; left:48; width:864; height:90;">
<div class="s3">
<div class="s1">
<p style="text-align:center; padding-bottom:0px; font-family:"(null)"; font-size:44;">
<span style="color:#000000; font-size:44; font-family:"(null)";">测试</span></p>
</div>
</div>
</div><img
src="x-apple-ql-id://0AF5CA5C-5685-4D8F-9503-2FBF3A206542/x-apple-ql-magic/CAA89CFD-5597-4A35-A6CB-85C050BA2A6A.png"
style="position:absolute; top:124; left:292; width:340; height:340;">
</div>
<!-- 其他页面.... -->
我们可以发现规律,每一个PPT 都在一个 div元素内, 对应类选择器为 slide!
- 通过运行JS代码,我们来获取一下PPT的页数,以及每一页的尺寸信息
获取PPT页数信息
NSInteger pageCount = [[self.webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByClassName('slide').length"] integerValue];
获取PPT每一页的长宽:
// PPT 宽度
NSInteger pageWidth = [[self.webView stringByEvaluatingJavaScriptFromString:@"parseInt(window.getComputedStyle(document.getElementsByClassName('slide')[0]).width)"] integerValue];
// PPT高度
NSInteger pageHeight = [[self.webView stringByEvaluatingJavaScriptFromString:@"parseInt(window.getComputedStyle(document.getElementsByClassName('slide')[0]).height)"] integerValue];
- 将PPT 展示到 WebView 后,然后通过iOS绘制, 来将每一页PPT保存到本地
绘制代码如下
- (UIImage* )imageWithView:(UIView *)view frame:(CGRect)frame{
@autoreleasepool {
UIGraphicsBeginImageContextWithOptions(frame.size, YES, 0.0);
CGContextRef context = UIGraphicsGetCurrentContext();
if (!context) {
return nil;
}
[view.layer renderInContext:context];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
NSData *imageData = UIImageJPEGRepresentation(image,0.6);
UIImage *resultImage = [UIImage imageWithData:imageData];
return resultImage;
}
}
以上就是通过PPT转图片的大概的一个流程!
我将以上代码进行了简单封装,下面介绍一下使用步骤
使用步骤:
- 导入 头文件
#import "PPTToImageTool.h"
- 传入PPT本地 url, 获取 转换后的 image 图片
// 获取本地 ppt url 地址
NSString * filePath = [[NSBundle mainBundle] pathForResource:@"IOS.pptx" ofType:nil];
// block 内部使用__weakself
__weak __typeof(self)weakSelf = self;
// 进行 ppt 转换
[self.toImagetool pptToImageWithPPTFileUrl:filePath
progress:^(CGFloat value) {
NSLog(@"进度-------%f", value);
} completion:^(NSArray * _Nonnull images) {
NSLog(@"转换后图片信息-------%@",images);
weakSelf.imageListView.images = images;
[weakSelf.imageListView reloadData];
}];
是不是非常简单....
踩坑总结
发现webView可以获取 html 代码后, 想着看能否通过 js 实现 html 区域转图片, 使用比较火的 js 三方库html2canvas进行转图片操作, 在写了一套转图片的js代码, 测试浏览器上运行都没啥问题, 但是到了 移动端,由于 html 的同源策略, 就会出现本地图片无法 截取的问题,以及 webView 生成的 html 不是很规范,导致被放弃!
