基于HTML5转换PDF的电子书阅读插件

述

存在阅读要求的项目，一般都是以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解决方案，在之前的文章中已经介绍过几个Web端和PDF相关的库，jsPDF同样是一个不错的客户端PDF引 SDK，你可以通过jsPDF在客户端完成相关操作，它包含了非常丰富的API，帮助你完成一系列的复杂操作！可以说它是相当领先的HTML5客户端解决方案了！

Github

https://github.com/MrRio/jsPDF

Github star数17k+,可以说相当受欢迎了！

安装使用

一般情况下我们会考虑使用包管理，常见的就是npm了，因此安装非常简单

npm install jspdf --save

或者也可以使用yarn

yarn add jspdf

接下来就是制作你的文件的时候了

默认导出为a4纸张，纵向，使用毫米表示单位

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

如果要更改纸张尺寸，方向或单位，可以执行以下操作：

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中使用中文文本，则您的字体必须具有必要的中文字形。因此，请检查您的字体是否支持所需的字形，否则它将显示空白而不是文本。

要将字体添加到jsPDF，在/fontconverter/fontconverter.html中使用官网提供的fontconverter。fontconverter将创建一个js文件，其中包含提供的ttf文件的内容作为base64编码的字符串和jsPDF的附加代码。你只需将生成的js-File添加到项目中即可。然后，就可以在代码中使用setFont-method并编写UTF-8编码文本。

Angular/Webpack/React等配置

常规操作

import * as jsPDF from 'jspdf'

有些框架，必须像下面这样

import jsPDF from 'jspdf';

API

jsPDF的api非常丰富，在这里就不提供相关地址了，在Github必然找的到，本文重点不在于介绍jsPDF的用法，将部分API截图展示，通过名称大致能猜到一些意思，具体用法需要参考官网文档：

从截图来看，其文档特别的详细，具体到每一个API在js文件的行数，便于阅读源代码，包括参数以及返回值都非常明确：

在线DEMO

官方提供了一个在线demo，可以直接运行代码，感兴趣的可以先尝试一下：

总结

jsPDF是笔者见过类似产品中较为突出的，几乎涵盖了所有PDF相关操作，非常详细的文档也让开发者，轻松上手，在线demo还能快速学习，如果你的项目对PDF的操作比较多，不妨尝试下jsPDF，唯一需要注意的就是解决字体问题，但是上文也提到过解决方案，感兴趣的可以进行体验！

近新项目需要处理 PDF，研究了 PDf.js 之后觉得很不错，于是写篇文章推荐给大家。

关于 PDF.js

PDF.js 的功能和它的名字一样简单，是一个使用 HTML5 技术来让前端网页支持读取、解析和显示 PDF 文档的 JS 工具库。这个项目由大名鼎鼎的 Mozilla 组织开发并且更新维护着，没错，就是那个开发了火狐浏览器的 Mozilla。所以 pdf.js 也内置在 Firefox 的 19+ 版本中，也是火狐浏览器的默认 PDF 处理工具。

一般来说，要查看 PDF 文档，我们需要一个 PDF 阅读器软件，而通过 PDF.js 可以在浏览器中直接显示和处理 PDF 文档，无论是在线浏览、存档或者其他基于 PDF 的功能都可以实现。

PDF.js 项目主页

PDF.js 的技术特性

功能强大，内置了很多实用的 api，几乎可以对 PDF 文件“为所欲为”；
兼容性超好，不仅支持现代浏览器，对于旧版本的浏览器也有很好的支持；
易于上手，官方也提供了很多代码例子。

我用 PDF.js 来做什么？

如果只是为什么显示 PDF 文档，其实大部分情况下浏览器都支持直接打开 PDF，之前碰到要显示 PDF 的需求，都是直接在浏览器新标签打开。

在浏览器中渲染 PDF

不过就在上周，我接到了一个需求，要在网页上支持导入 PDF 文件，转化成图片保存到后端，并且还要提取 PDF 文档中的文字。于是我就开始研究 PDF.js ，了解之后发现这个工具库非常强大，完全可以满足我的需求，那些在线转换 PDF 的工具实际上都是基于 PDF.js 开发的。

我要处理的文档有一部分是发票，其实里面的文字并不是图片，而是可以选择的，这种类型的文档通过 PDF.js 甚至可以直接获取文字的内容，OCR 识别的过程都免了，实在太棒了。

开发上手体验和使用建议

要开始使用 PDF.js ，可以直接从项目下载源码，然后在页面中引入 pdf.js ，就可以按照代码例子那些来使用了。

官方文档

我的实现方式

我是在 Vue 项目中使用，所以我选择用 npm 安装的方式：

npm i pdfjs-dist -S

然后在 Vue 页面中引入 PDF.js，注意这里的引入方式，需要在包名后加上 /webpack ，否则会报错，原因我也没有去深入排查。

<template>
<div class="hello">
    <input
      type="file"
      name="file"
      id="file"
      accept="application/pdf"
      single
      placeholder="请选择pdf文件"
      @change="handleFile"
    />
    <canvas id="viewer" ref="viewer" :width="width" :height="height"></canvas>
  </div>
</template>
<script>
import { getDocument } from "pdfjs-dist/webpack"; // 注意这里的引入方式

// 省略无关代码...
// methods:
    handleFile(e) {
      const reader = new FileReader();
      reader.onload = (evt) => {
        this.init(evt.target.result);
      };

      reader.readAsDataURL(e.target.files[0]);
    },
    async init(path) {
      // 读取pdf
      let pdf = await getDocument(path).promise; //返回一个pdf对象
      const page = await pdf.getPage(0); // 获取第一页
      const viewport = page.getViewport({ scale: 1 });
      const textContent = await page.getTextContent();
      console.log(textContent.items); // 页面的文章内容在这

      const context = this.canvas.getContext("2d");
      // 设置canvas的尺寸
      this.width = viewport.width;
      this.height = viewport.height;
      await page.render({ canvasContext: context, viewport: viewport }).promise; // 渲染第一页内容
    },

</script>

上面这段代码就是我项目 demo 中的一部分，可以实现读取 PDF 文档中的页面和文字，代码的末尾把第一页渲染到了 canvas 中，想要转成图片，只要把 canvas 中的内容转成 PNG 图片即可，区区十来行代码，非常简单。

免费开源说明

Mozilla 组织本身是一个非营利性组织，成立以来一直致力于推动浏览器的良好发展，PDF.js 也不例外，是一个免费开源的项目，源码基于 Apache 2.0 许可托管在 Github 上，任何人都可以免费下载来使用，用在商业项目也完全没问题。

↓↓点击查看本次分享的网站。

PDF.js - 免费开源的 JavaScript 读取、显示 PDF 文档的工具库，由 Mozilla 开发并且持续维护｜那些免费的砖

在线咨询

上一篇：[理论篇]一.JavaScript中的死链接和空链接
下一篇：html大文件传输源码

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商