<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	xmlns:media="http://search.yahoo.com/mrss/"
>

<channel>
	<title>pdf 归档 - Tinyfool的个人网站</title>
	<atom:link href="https://codechina.org/tag/pdf/feed/" rel="self" type="application/rss+xml" />
	<link>https://codechina.org/tag/pdf/</link>
	<description></description>
	<lastBuildDate>Sun, 19 May 2024 06:17:29 +0000</lastBuildDate>
	<language>zh-Hans</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>
	<item>
		<title>从零开始，使用SwiftUI和PDFKit快速构建完全可定制的PDF阅读器</title>
		<link>https://codechina.org/2023/01/26809/</link>
					<comments>https://codechina.org/2023/01/26809/#respond</comments>
		
		<dc:creator><![CDATA[tinyfool]]></dc:creator>
		<pubDate>Tue, 03 Jan 2023 13:39:05 +0000</pubDate>
				<category><![CDATA[iOS开发]]></category>
		<category><![CDATA[技术]]></category>
		<category><![CDATA[pdf]]></category>
		<category><![CDATA[pdfkit]]></category>
		<category><![CDATA[swift]]></category>
		<category><![CDATA[swiftui]]></category>
		<guid isPermaLink="false">https://codechina.org/?p=26809</guid>

					<description><![CDATA[<p>SwiftUI快速创建UI的能力非常强大，苹果还提供了PDFKit框架，所以，用SwiftUI和PDFKit可 [&#8230;]</p>
<p><a href="https://codechina.org/2023/01/26809/">从零开始，使用SwiftUI和PDFKit快速构建完全可定制的PDF阅读器</a>最先出现在<a href="https://codechina.org">Tinyfool的个人网站</a>。</p>
]]></description>
										<content:encoded><![CDATA[
<p>SwiftUI快速创建UI的能力非常强大，苹果还提供了PDFKit框架，所以，用SwiftUI和PDFKit可以用非常少的代码，非常快速的创建一个完全可定制的PDF阅读器。</p>



<p>我们来从零开始，做一个PDF阅读器。</p>



<span id="more-26809"></span>



<h2 class="wp-block-heading">创建项目</h2>



<p>首先，打开Xcode，创建一个新的iOS App。项目名字可以就叫做PdfReader。Interface选择Swift UI，language选择Swift。</p>



<p>因为PDFKit是一个UIKit库，不是原生的SwiftUI对象，所以，我们先需要做一个UIViewRepresentable类，来作为两者之间的桥梁。我已经帮你准备好了一个。你只需要创建一个SwiftPDFView.swift，把如下代码复制进去即可。</p>



<pre class="wp-block-code"><code lang="swift" class="language-swift">//
//  SwiftPDFView.swift
//  PdfReader
//
//  Created by HaoPeiqiang on 2023/1/3.
//

import SwiftUI
import PDFKit

struct SwiftPDFView: UIViewRepresentable {

    
    let url:URL

    func makeUIView(context: Context) -&gt; PDFView {
        
        let pdfView = PDFView()
        pdfView.document = PDFDocument(url: url)
        pdfView.displayMode = .singlePage
        pdfView.autoScales = true
        pdfView.usePageViewController(true, withViewOptions: nil)
        return pdfView
    }
    
    
    func updateUIView(_ pdfView: PDFView, context: Context) {
        
    }

}

struct SwiftPDFView_Previews: PreviewProvider {
    static var previews: some View {
        
        SwiftPDFView(url:Bundle.main.url(forResource: "sample_pdf", withExtension: "pdf")!)
    }
}
</code></pre>



<p>然后，你可以找到自动生成的ContentView.swift文件，把在body内部自动生成的代码删除，加上<code>SwiftPDFView(url: Bundle.main.url(forResource: "sample_pdf", withExtension: "pdf")!)</code>。好，三分钟不到，你已经成功创建了一个PDF阅读器了。</p>



<p>如果你打开了Xcode代码区域右侧的预览区域，都不用执行App，你已经可以看到你的PDF浏览器已经可以工作了，也可以在PDF页面之间翻页。</p>



<figure class="wp-block-image size-large"><img fetchpriority="high" decoding="async" width="1024" height="662" src="https://codechina.org/wp-content/uploads/2023/01/截屏2023-01-03-20.49.53-1024x662.png" alt="" class="wp-image-26819" srcset="https://codechina.org/wp-content/uploads/2023/01/截屏2023-01-03-20.49.53-1024x662.png 1024w, https://codechina.org/wp-content/uploads/2023/01/截屏2023-01-03-20.49.53-300x194.png 300w, https://codechina.org/wp-content/uploads/2023/01/截屏2023-01-03-20.49.53-768x496.png 768w, https://codechina.org/wp-content/uploads/2023/01/截屏2023-01-03-20.49.53-1536x993.png 1536w, https://codechina.org/wp-content/uploads/2023/01/截屏2023-01-03-20.49.53-2048x1324.png 2048w, https://codechina.org/wp-content/uploads/2023/01/截屏2023-01-03-20.49.53-1200x776.png 1200w, https://codechina.org/wp-content/uploads/2023/01/截屏2023-01-03-20.49.53-1980x1280.png 1980w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<h2 class="wp-block-heading">加入缩略图导航栏</h2>



<p>你可能见过有的PDF App，在PDF页面下方有一排缩略图，可以导航也可以预览PDF的文件内容，这个叫做<code>PDFThumbnailView</code>。加入<code>PDFThumbnailView</code>可以让我们的PDF阅读器，看起来更专业。</p>



<p>我们可以回到<code>SwiftPDFView.swift</code>文件，在SwiftPDFView类的代码里面加入如下代码：</p>



<pre class="wp-block-code"><code lang="swift" class="language-swift">    func setThumbnailView(_ pdfView:PDFView) {
        let thumbnailView = PDFThumbnailView()
        thumbnailView.translatesAutoresizingMaskIntoConstraints = false
        pdfView.addSubview(thumbnailView)
        
        thumbnailView.leadingAnchor.constraint(equalTo: pdfView.safeAreaLayoutGuide.leadingAnchor).isActive = true
        thumbnailView.trailingAnchor.constraint(equalTo: pdfView.safeAreaLayoutGuide.trailingAnchor).isActive = true
        thumbnailView.bottomAnchor.constraint(equalTo: pdfView.safeAreaLayoutGuide.bottomAnchor).isActive = true
        thumbnailView.bottomAnchor.constraint(equalTo: pdfView.safeAreaLayoutGuide.bottomAnchor).isActive = true
        
        thumbnailView.heightAnchor.constraint(equalToConstant: 40).isActive = true

        thumbnailView.thumbnailSize = CGSize(width: 20, height: 30)
        thumbnailView.layoutMode = .horizontal
        thumbnailView.pdfView = pdfView
    }
</code></pre>



<p>然后在刚才的<code>makeUIView</code>方法，<code>return pdfView</code>之前加入一句<code><strong>self</strong>.setThumbnailView(pdfView)</code>即可。</p>



<p>然后，查看预览区域，就会发现PDF显示区域下面出现了缩略图导航栏。</p>



<figure class="wp-block-image size-full"><img decoding="async" width="964" height="610" src="https://codechina.org/wp-content/uploads/2023/01/截屏2023-01-03-21.33.40.png" alt="" class="wp-image-26825" srcset="https://codechina.org/wp-content/uploads/2023/01/截屏2023-01-03-21.33.40.png 964w, https://codechina.org/wp-content/uploads/2023/01/截屏2023-01-03-21.33.40-300x190.png 300w, https://codechina.org/wp-content/uploads/2023/01/截屏2023-01-03-21.33.40-768x486.png 768w" sizes="(max-width: 964px) 100vw, 964px" /></figure>



<p>项目代码可从Github下载 <a href="https://github.com/Swift-Cast/PdfReader">https://github.com/Swift-Cast/PdfReader</a></p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<p><a href="https://iapp4me.com/pdf-extractor">PDF Extractor &#8211; Extract text/images from PDF</a></p>
<p><a href="https://codechina.org/2023/01/26809/">从零开始，使用SwiftUI和PDFKit快速构建完全可定制的PDF阅读器</a>最先出现在<a href="https://codechina.org">Tinyfool的个人网站</a>。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://codechina.org/2023/01/26809/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			<media:content url="https://codechina.org/wp-content/uploads/2023/01/截屏2023-01-03-20.49.53-1024x662.png" medium="image" />
	</item>
	</channel>
</rss>
