iOS将HTML页面转换成PDF文件保存到本地并分享传输文件 - 简书

迈不过友情╰ 2022-06-09 02:36 345阅读 0赞

# iOS将HTML页面转换成PDF文件保存到本地并分享传输文件 #

![144][]

作者  Samson\_Xu  关注

2017.05.04 15:27\*  字数 1660  阅读 177 评论 8 喜欢 2 阅读 177 评论 8 喜欢 2

第一次修改：2017.05.26

修改内容：之前的方法在转化带有图片的html页面时会出现图片缺失问题，由于之前我需要转换的html不包含图片，所以没有发现这一问题，现在增加一个直接将webView转化为PDF的方法，在下面进行详述。

--------------------

前言：最近项目有个新的需求：用户可以将当前HTML页面内容保存到本地，并可将此内容进行分享。为此我想了两种办法：

1、将HTML页面截屏拼接为长图进行保存；

2、将HTML页面转换为PDF文件进行保存；

相比之下，显然第一种在操作性和实用性上都不太合适，因此我选择第二种方法进行实现。

--------------------

Github：[看这里][Link 1]

![144][]

简单整理下思路，我们可以分以下几步进行处理：

1、获取HTML文件

2、对HTML富文本进行处理

3、将处理后的富文本进行PDF文件保存

4、对PDF文件进行分享

--------------------

1、获取HTML文件

> //获取本地HTML内容并进行加载展示
> 
> NSString \*readmePath = \[\[NSBundle mainBundle\] pathForResource:@"test" ofType:@"html"\];  
> 
> 
> \_htmlStr = \[NSString stringWithContentsOfFile:readmePath encoding:NSUTF8StringEncoding error:nil\];
> 
> \[webView loadHTMLString:\_htmlStr baseURL:nil\];

2、对HTML富文本进行处理

这里我们通过集成[DTCoreText][]对富文本进行处理：

先简单介绍一下CoreText，CoreText是iOS/OSX里的文字渲染引擎，在iOS/OSX中看到的所有文字在底层都是由CoreText去渲染。

DTCoreText是个开源的iOS富文本组件，它可以解析HTML与CSS最终用CoreText绘制出来，通常用于在一些需要显示富文本的场景下代替低性能的UIWebView。具体可参见这篇文章：[iOS富文本组件的实现—DTCoreText源码解析][iOS_DTCoreText]。

然而不得不说一下DTCoreText这个开源框架的集成还是很坑爹的，一般的第三方框架直接down下来拖到项目中就能用，但是这个框架down下来之后缺少文件，从cocoapods集成运行时又会出现crash。我试着集成了几次都以失败告终，最后上网查找了一下集成方法，使用Framwork的方式导入；有兴趣的也可以看看：[官方提供的导入方法][Link 2]。

集成DTCoreText：

1、将两个依赖库导入项目中

![144][]

2、按图示步骤进行操作：选中target的BuildPhases-->选中左侧加号NewCopy Files Phases-->将两个依赖库添加进去，选择Destination为Frameworks

![144][]

新建OCPDFGenerator类对HTML文本进行处理：

> \#import@interface OCPDFGenerator : NSObject  
> 
> 
> \+(NSString \*)generatePDFFromAttributedString:(NSAttributedString \*)str;
> 
> \+(NSString \*)generatePDFFromHTMLString:(NSString \*)str;
> 
> @end

将HTML文本内容转换为富文本：

> \+(NSString \*)generatePDFFromHTMLString:(NSString \*)html \{
> 
> NSData \*data = \[html dataUsingEncoding:NSUTF8StringEncoding\];
> 
> // Create attributed string from HTML
> 
> CGSize maxImageSize = CGSizeMake(500, 500);
> 
> NSDictionary \*options = \[NSDictionary dictionaryWithObjectsAndKeys:\[NSNumber numberWithFloat:1.0\], NSTextSizeMultiplierDocumentOption, \[NSValue valueWithCGSize:maxImageSize\], DTMaxImageSize,
> 
> @"Arial", DTDefaultFontFamily,  @"blue", DTDefaultLinkColor, nil\];
> 
> NSAttributedString \*str = \[\[NSAttributedString alloc\]initWithHTMLData:data options:options documentAttributes:NULL\];
> 
> return \[self generatePDFFromAttributedString:str\];
> 
> \}

3、将处理后的富文本进行PDF文件保存

创建目标为指定可变数据对象的基于PDF的图形上下文，并进行存储：

> \+(NSString \*)generatePDFFromAttributedString:(NSAttributedString \*)str \{
> 
> NSString \*fileName = @"testFile.pdf";
> 
> NSArray \*paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
> 
> NSString \*newFilePath = \[\[paths objectAtIndex:0\] stringByAppendingPathComponent:fileName\];
> 
> int fontSize = 12;
> 
> NSString \*font = @"Verdana";
> 
> UIColor \*color = \[UIColor blackColor\];
> 
> int DOC\_WIDTH = 612;
> 
> int DOC\_HEIGHT = 792;
> 
> int LEFT\_MARGIN = 50;
> 
> int RIGHT\_MARGIN = 50;
> 
> int TOP\_MARGIN = 50;
> 
> int BOTTOM\_MARGIN = 50;
> 
> int CURRENT\_TOP\_MARGIN = TOP\_MARGIN;
> 
> //You can make the first page have a different top margin to place headers, etc.
> 
> int FIRST\_PAGE\_TOP\_MARGIN = TOP\_MARGIN;
> 
> CGRect a4Page = CGRectMake(0, 0, DOC\_WIDTH, DOC\_HEIGHT);
> 
> NSDictionary \*fileMetaData = \[\[NSDictionary alloc\] init\];
> 
> if (!UIGraphicsBeginPDFContextToFile(newFilePath, a4Page, fileMetaData )) \{
> 
> NSLog(@"error creating PDF context");
> 
> return nil;
> 
> \}
> 
> BOOL done = NO;

> CGContextRef context = UIGraphicsGetCurrentContext();
> 
> CFRange currentRange = CFRangeMake(0, 0);
> 
> CGContextSetTextDrawingMode (context, kCGTextFill);
> 
> CGContextSelectFont (context, \[font cStringUsingEncoding:NSUTF8StringEncoding\], fontSize, kCGEncodingMacRoman);
> 
> CGContextSetFillColorWithColor(context, \[color CGColor\]);
> 
> // Initialize an attributed string.
> 
> CFAttributedStringRef attrString = (\_\_bridge CFAttributedStringRef)str;
> 
> // Create the framesetter with the attributed string.
> 
> CTFramesetterRef framesetter = CTFramesetterCreateWithAttributedString(attrString);
> 
> int pageCount = 1;
> 
> do \{
> 
> UIGraphicsBeginPDFPage();
> 
> CGMutablePathRef path = CGPathCreateMutable();
> 
> if(pageCount == 1) \{
> 
> CURRENT\_TOP\_MARGIN = FIRST\_PAGE\_TOP\_MARGIN;
> 
> \} else \{
> 
> CURRENT\_TOP\_MARGIN = TOP\_MARGIN;
> 
> \}

> CGRect bounds = CGRectMake(LEFT\_MARGIN,
> 
> CURRENT\_TOP\_MARGIN,
> 
> DOC\_WIDTH - RIGHT\_MARGIN - LEFT\_MARGIN,
> 
> DOC\_HEIGHT - CURRENT\_TOP\_MARGIN - BOTTOM\_MARGIN);
> 
> CGPathAddRect(path, NULL, bounds);
> 
> // Create the frame and draw it into the graphics context
> 
> CTFrameRef frame = CTFramesetterCreateFrame(framesetter, currentRange, path, NULL);
> 
> if(frame) \{
> 
> CGContextSaveGState(context);
> 
> CGContextTranslateCTM(context, 0, bounds.origin.y);
> 
> CGContextScaleCTM(context, 1, -1);
> 
> CGContextTranslateCTM(context, 0, -(bounds.origin.y + bounds.size.height));
> 
> CTFrameDraw(frame, context);
> 
> CGContextRestoreGState(context);
> 
> // Update the current range based on what was drawn.
> 
> currentRange = CTFrameGetVisibleStringRange(frame);
> 
> currentRange.location += currentRange.length;
> 
> currentRange.length = 0;
> 
> \}

> // If we're at the end of the text, exit the loop.
> 
> if (currentRange.location == CFAttributedStringGetLength((CFAttributedStringRef)attrString))
> 
> done = YES;
> 
> pageCount++;
> 
> \} while(!done);
> 
> UIGraphicsEndPDFContext();
> 
> return newFilePath;
> 
> \}

4、对PDF文件进行分享

UIDocumentInteractionController是从iOS 3.2的SDK开始支持的，它是直接继承的NSObject，UIDocumentInteractionController主要给我们提供了三种用途：

> 展示一个可以操作我们分享的文档类型的第三方App列表，包括官方处理应用，第三方应用，AirDrop等。
> 
> 在第一条展示列表的基础上添加额外的操作，比如复制，打印，预览，保存等。
> 
> 结合Quick Look框架直接展示文档内容。

代码实现：

> \- (void)sharePdf\{
> 
> NSString \*filePath = \[NSHomeDirectory() stringByAppendingPathComponent:@"Documents/testFile.pdf"\];
> 
> UIDocumentInteractionController \*ctrl = \[UIDocumentInteractionController interactionControllerWithURL:\[NSURL fileURLWithPath:filePath\]\];
> 
> ctrl.delegate = self;
> 
> ctrl.UTI = @"com.adobe.pdf";
> 
> \[ctrl presentOpenInMenuFromRect:CGRectZero inView:self.view animated:YES\];
> 
> \}

![144][]

注：这里运行之后点击iBooks进行分享，会发现程序crash，查看crash日志发现：猜测是UIDocumentInteractionController提前释放内存导致，于是我们将UIDocumentInteractionController对象声明为strong类型的实例对象，防止其内存提前释放即可。

> @property (nonatomic, strong) UIDocumentInteractionController \*documentInterCtrl;

--------------------

2017.05.26修改内容：

上面的方法由于是直接对富文本进行操作，所以忽略了处理图片这一问题。上网研究了一下，发现可以用UIPrintPageRenderer进行页面绘制并保存，这一方法更简单，代码也更简洁。

具体实现：

1. 创建一个webView的类别用于转换文件，并添加内容转换的接口@interface UIWebView (ConverToData)

> @interface UIWebView (ConverToData)  
> 
> 
> \- (NSData \*)converToPDF;

2. 使用UIPrintPageRenderer对当前webView进行绘制

> \- (NSData \*)converToPDF\{  
> 
> 
> UIViewPrintFormatter \*fmt = \[self viewPrintFormatter\];
> 
> UIPrintPageRenderer \*render = \[\[UIPrintPageRenderer alloc\] init\];
> 
> \[render addPrintFormatter:fmt startingAtPageAtIndex:0\];
> 
> CGRect page;
> 
> page.origin.x=0;
> 
> page.origin.y=0;
> 
> page.size.width=600;
> 
> page.size.height=768;
> 
> CGRect printable=CGRectInset( page, 50, 50 );
> 
> \[render setValue:\[NSValue valueWithCGRect:page\] forKey:@"paperRect"\];
> 
> \[render setValue:\[NSValue valueWithCGRect:printable\] forKey:@"printableRect"\];
> 
> NSMutableData \* pdfData = \[NSMutableData data\];
> 
> UIGraphicsBeginPDFContextToData( pdfData, CGRectZero, nil );
> 
> for (NSInteger i=0; i < \[render numberOfPages\]; i++)
> 
> \{
> 
> UIGraphicsBeginPDFPage();
> 
> CGRect bounds = UIGraphicsGetPDFContextBounds();
> 
> \[render drawPageAtIndex:i inRect:bounds\];
> 
> \}
> 
> UIGraphicsEndPDFContext();
> 
> return pdfData;
> 
> \}
> 
>   
>

Github的代码也做了同步更新。

[144]: 
[Link 1]: https://github.com/SamsonXu/HTMLConversToPDF
[DTCoreText]: https://github.com/Cocoanetics/DTCoreText
[iOS_DTCoreText]: http://blog.cnbang.net/tech/2630/
[Link 2]: https://docs.cocoanetics.com/DTCoreText/docs/Setup%20Guide.html#Subproject