述

存在閱讀要求的項目，一般都是以pdf.js插件閱讀PDF文件，但存在閱讀體驗不理想的情況，所以參考手機上的電子書閱讀器，使用國外的[鏈接描述][1]http://fliphtml5.com 制作電子書示例。

最終效果

效果如下

代碼說明

完整代碼已上傳git，標題搜索即可。

插件功能強大，縮略圖，鼠標翻頁，放大縮小都可以，部分配置代碼config.js如下

var bookConfig = {
	appName:'flippdf',
	totalPageCount : 0,
	largePageWidth : 1080,
	largePageHeight : 1440,
	normalPath : "files/page/",
	largePath : "files/large/",
	thumbPath : "files/thumb/",
	
	ToolBarsSettings:"",
	TitleBar:"",
	appLogoLinkURL:"",
	bookTitle:"FLIPBUILDER",
	bookDescription:"",
	ButtonsBar:"",
	ShareButton:"",
	
	ThumbnailsButton:"",
	ThumbnailsButtonVisible:"Hide",
	ZoomButton:"",
	ZoomButtonVisible:"No",
	FlashDisplaySettings:"",
	MainBgConfig:"",
	bgBeginColor:"#cccccc",
	bgEndColor:"#eeeeee",
	bgMRotation:45,
	pageBackgroundColor:"#FFFFFF",
	flipshortcutbutton:"Hide",
	BookMargins:"",
	topMargin:10,
	bottomMargin:10,
	leftMargin:10,
	rightMargin:10,
	HTMLControlSettings:"",
	linkconfig:"",
	LinkDownColor:"#808080",
	LinkAlpha:0.5,
	OpenWindow:"_Blank",
	BookMarkButtonVisible:'False',
	productName : 'Demo created by Flip PDF',
	homePage : 'http://www.html5.com/',
	isFlipPdf : "False",
	TableOfContentButtonVisible:"False",
	searchTextJS:'javascript/search_config.js',
	searchPositionJS:undefined
};

## java部分 ##

插件顯示實際是使用的jpg圖片，可以由pdf文檔生成，其中涉及的是正常圖片和縮略圖的生成。

具體如下

maven引入

<dependency>
			<groupId>org.apache.pdfbox</groupId>
			<artifactId>fontbox</artifactId>
			<version>2.0.9</version>
		</dependency>
		<dependency>
			<groupId>org.apache.pdfbox</groupId>
			<artifactId>pdfbox</artifactId>
			<version>2.0.9</version>
		</dependency>

核心程序

紹

和往常一樣，jsPDF是一個開源的客戶端的PDF解決方案，在之前的文章中已經(jīng)介紹過幾個Web端和PDF相關(guān)的庫，jsPDF同樣是一個不錯的客戶端PDF引 SDK，你可以通過jsPDF在客戶端完成相關(guān)操作，它包含了非常豐富的API，幫助你完成一系列的復(fù)雜操作！可以說它是相當領(lǐng)先的HTML5客戶端解決方案了！

Github

https://github.com/MrRio/jsPDF

Github star數(shù)17k+,可以說相當受歡迎了！

安裝使用

一般情況下我們會考慮使用包管理，常見的就是npm了，因此安裝非常簡單

npm install jspdf --save

或者也可以使用yarn

yarn add jspdf

接下來就是制作你的文件的時候了

默認導(dǎo)出為a4紙張，縱向，使用毫米表示單位

var doc = new jsPDF()
doc.text('Hello world!', 10, 10)
doc.save('a4.pdf')

如果要更改紙張尺寸，方向或單位，可以執(zhí)行以下操作：

var doc = new jsPDF({
 orientation: 'landscape',
 unit: 'in',
 format: [4, 2]
})
doc.text('Hello world!', 1, 1)
doc.save('two-by-four.pdf')

使用UTF-8 / TTF

PDF中的14種標準字體僅限于ASCII代碼頁。如果要使用UTF-8，則必須集成自定義字體，該字體提供所需的字形。jsPDF支持.ttf文件。因此，如果你希望在pdf中使用中文文本，則您的字體必須具有必要的中文字形。因此，請檢查您的字體是否支持所需的字形，否則它將顯示空白而不是文本。

要將字體添加到j(luò)sPDF，在/fontconverter/fontconverter.html中使用官網(wǎng)提供的fontconverter。fontconverter將創(chuàng)建一個js文件，其中包含提供的ttf文件的內(nèi)容作為base64編碼的字符串和jsPDF的附加代碼。你只需將生成的js-File添加到項目中即可。然后，就可以在代碼中使用setFont-method并編寫UTF-8編碼文本。

Angular/Webpack/React等配置

常規(guī)操作

import * as jsPDF from 'jspdf'

有些框架，必須像下面這樣

import jsPDF from 'jspdf';

API

jsPDF的api非常豐富，在這里就不提供相關(guān)地址了，在Github必然找的到，本文重點不在于介紹jsPDF的用法，將部分API截圖展示，通過名稱大致能猜到一些意思，具體用法需要參考官網(wǎng)文檔：

從截圖來看，其文檔特別的詳細，具體到每一個API在js文件的行數(shù)，便于閱讀源代碼，包括參數(shù)以及返回值都非常明確：

在線DEMO

官方提供了一個在線demo，可以直接運行代碼，感興趣的可以先嘗試一下：

總結(jié)

jsPDF是筆者見過類似產(chǎn)品中較為突出的，幾乎涵蓋了所有PDF相關(guān)操作，非常詳細的文檔也讓開發(fā)者，輕松上手，在線demo還能快速學習，如果你的項目對PDF的操作比較多，不妨嘗試下jsPDF，唯一需要注意的就是解決字體問題，但是上文也提到過解決方案，感興趣的可以進行體驗！