整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

PDF.js Electron Viewer

DF.js 是基于 HTML5 解析与渲染 PDF 的 JavaScript 库,由 Mozilla 主导开源。

本文旨在介绍 PDF.js 于 Electron 里如何开始使用,实际尝试了用其 API 或嵌入 HTML 的几种方式。

  • 代码: https://github.com/ikuokuo/electron-pdf-viewer.git

从零准备项目

项目采用 Electron React Antd PDF.js 来实现,以下是从零准备项目的过程。

Electron React

这里用 electron-react-boilerplate[1] 模板开始 Electron React 项目。

# 获取模板
git clone --depth=1 \
https://github.com/electron-react-boilerplate/electron-react-boilerplate \
electron-pdf-viewer

cd electron-pdf-viewer

# 设定仓库
git remote set-url origin git@github.com:ikuokuo/electron-pdf-viewer.git
# 如果想合并成一个初始提交
#  https://stackoverflow.com/a/23486788
git config --global alias.squash-all '!f(){ git reset $(git commit-tree HEAD^{tree} -m "${1:-A new start}");};f'
git squash-all "first commit"
git push -u origin main
# 依赖
npm install
# 运行
npm start
# 打包
npm run package

准备编辑器(VSCode):

code --install-extension dbaeumer.vscode-eslint
code --install-extension dzannotti.vscode-babel-coloring
code --install-extension EditorConfig.EditorConfig

其他编辑器,可见 Editor Configuration[2]

Ant Design

添加 antd 依赖:

npm install antd

之后,就可以快速布局页面了,如下:

PDF.js

添加 pdfjs 依赖:

npm install pdfjs-dist
npm install -D worker-loader

此外,准备 PDF 样例进 static/,简单用 Python 提供 HTTP 访问:

npm run static

用于开发运行,正式运行可用 file:// 地址。

PDF.js 渲染

使用 API

用 API 渲染页面,可见官方 Examples[3]

1. 导入包

import * as pdfjsLib from 'pdfjs-dist/webpack';

2. 渲染页面

(async () => {
  // 获取 doc
  const loadingTask = pdfjsLib.getDocument(url);
  const pdf = await loadingTask.promise;

  console.log(`PDF loaded, n=${pdf.numPages}`);
  setNumPages(pdf.numPages);

  // 获取 page
  const page = await pdf.getPage(1);

  // 获取 canvas

  const scale = 1.5;
  const viewport = page.getViewport({ scale });
  // Support HiDPI-screens.
  const outputScale = window.devicePixelRatio || 1;

  const canvas = canvasRef.current;
  if (canvas == null) return;
  const context = canvas.getContext('2d');

  canvas.width = Math.floor(viewport.width * outputScale);
  canvas.height = Math.floor(viewport.height * outputScale);
  canvas.style.width = `${Math.floor(viewport.width)}px`;
  canvas.style.height = `${Math.floor(viewport.height)}px`;

  const transform =
    outputScale !== 1 ? [outputScale, 0, 0, outputScale, 0, 0] : null;

  // 渲染 page
  const renderContext = {
    canvasContext: context,
    transform,
    viewport,
  };
  await page.render(renderContext);
  console.log('Page rendered!');
})();

完整代码,见 Pdfjs/index.tsx[4]。效果如下:

使用 Viewer API

用 Viewer API 渲染,其在 pdfjs-dist/web/pdf_viewer 路径下。

1. 导入包

import * as pdfjsLib from 'pdfjs-dist/webpack';
import { PDFViewer, EventBus } from 'pdfjs-dist/web/pdf_viewer';
import 'pdfjs-dist/web/pdf_viewer.css';

2. 布局页面

<div className="viewer">
  <div>url={url}</div>
  <div>numPages={numPages}</div>
  <div ref={hrRef} />
  <div ref={containerRef} className="container">
    <div className="pdfViewer" />
  </div>
</div>

要求 absolute 定位:

.viewer {
  position: relative;

  .container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: scroll;
  }
}

3. 渲染 PDF

const container = containerRef.current;
if (container == null) return;

if (hrRef.current) {
  container.style.top = `${hrRef.current.offsetTop}px`;
}

// 监听事件,必须传参 PDFViewer 为实例
const eventBus = new EventBus(null);
eventBus.on('pagesinit', () => {
  console.log('pagesinit');
});
// eslint-disable-next-line @typescript-eslint/no-explicit-any
eventBus.on('pagesloaded', (e: any) => {
  console.log('pagesloaded');
  console.log(e);
  setNumPages(e.pagesCount);
});
eventBus.on('pagerendered', () => {
  console.log('pagerendered');
});

// 创建 PDFViewer
const pdfViewer = new PDFViewer({
  container,
  eventBus,
  linkService: null,
  renderer: 'canvas',
  l10n: null,
});

// 导入 Document
(async () => {
  const loadingTask = pdfjsLib.getDocument(url);
  const pdf = await loadingTask.promise;
  pdfViewer.setDocument(pdf);
})();

完整代码,见 PdfViewer/index.tsx[5]。效果如下:

使用 Viewer HTML

PDF.js 提供了在线演示的 viewer.html,不过 pdfjs-dist 里没有,要自己编译其源码。

编译结果已放进 static/pdfjs/,可用 Electron Window 打开 web/viewer.html?file=x.pdf 或用 iframe 嵌入。

如果自己重新编译,过程如下:

git clone -b master --depth=1 https://github.com/mozilla/pdf.js.git
cd pdf.js

# 安装依赖
npm install -g gulp-cli
npm install

# 开发运行
gulp server
# http://localhost:8888/web/viewer.html

# 编译发布
gulp generic
# build/generic/

iframe 嵌入的话,也是打开 web/viewer.html?file=x.pdf

<div className="viewerHTML">
  <div>pdfUrl={pdfUrl}</div>
  <div>pdfWebViewerUrl={pdfWebViewerUrl}</div>
  <iframe
    className="pdfViewer"
    title="PdfViewerHTML"
    src={`${pdfWebViewerUrl}?file=${pdfUrl}`}
  />
</div>
.viewerHTML {
  .pdfViewer {
    border: none;
    width: 100%;
    height: 100%;
  }
}

这里打开的 npm run static 提供的 HTTP 地址,效果如下:

iframe 要打开本地 HTML 试了下没成,如果想在 Electron + React 下这么用,还要研究下怎么弄。

最后

PDF.js 可以说是 Web 渲染 PDF 的不二选择,很多 PDF Web Viewer 库都是基于它实现的。

GoCoding 个人实践的经验分享,可关注公众号!

脚注

[1] electron-react-boilerplate: https://electron-react-boilerplate.js.org/

[2] Editor Configuration: https://electron-react-boilerplate.js.org/docs/editor-configuration

[3] Examples: https://mozilla.github.io/pdf.js/examples/

[4] Pdfjs/index.tsx: https://github.com/ikuokuo/electron-pdf-viewer/blob/main/src/renderer/pages/Pdfjs/index.tsx

[5] PdfViewer/index.tsx: https://github.com/ikuokuo/electron-pdf-viewer/blob/main/src/renderer/pages/PdfViewer/index.tsx

swagger API导出为HTML或者PDF

现在有很多项目都是使用的swagger,将API直接写在swagger文档中,使用起来非常方便,并且支持在线调试。但是它不方便对外提供,这里我们找到了一种方法,可以方便的将swagger API导出为HTML或者PDF。

主要使用maven的两个插件:1. swagger2markup-maven-plugin2. asciidoctor-maven-plugin

下面我们会详细讲解怎么使用他们和可能会遇到的问题。

什么是Asciidoc

AsciiDoc是一种文本文档格式,用于编写笔记,文档,文章,书籍,电子书,幻灯片,网页,手册页和博客。 AsciiDoc文件可以转换为多种格式,包括HTML,PDF,EPUB,手册页。

AsciiDoc是高度可配置的:AsciiDoc源文件语法和后端输出标记(可以是几乎任何类型的SGML / XML标记)都可以由用户自定义和扩展。

AsciiDoc是免费软件,并根据GNU通用公共许可证版本2(GPLv2)的条款获得许可。

AsciiDoc,它的设计初衷就是为了解决写书规模的问题,并且是 O’Reilly 的在线出版平台 Atlas 的推荐语言。

swagger2markup-maven-plugin

swagger2markup-maven-plugin这个插件可以将swagger的API转换为ASCIIDOC或者MARKDOWN和CONFLUENCE_MARKUP。这里我们选择转换为ASCIIDOC。

在build中加入如下代码:

<plugin>
                <groupId>io.github.swagger2markup</groupId>
                <artifactId>swagger2markup-maven-plugin</artifactId>
                <version>1.3.7</version>
                <configuration>
                    <!--此处端口一定要是当前项目启动所用的端口-->
                    <swaggerInput>http://localhost:7667/v2/api-docs</swaggerInput>
                    <outputDir>target/docs/asciidoc/generated</outputDir>
                    <config>
                        <!-- 除了ASCIIDOC之外,还有MARKDOWN和CONFLUENCE_MARKUP可选 -->
                        <swagger2markup.markupLanguage>ASCIIDOC</swagger2markup.markupLanguage>
                    </config>
                </configuration>
            </plugin>

版本我们用的是最新的1.3.7.

target/docs/asciidoc/generated 是生成的ASCIIDOC的目标地址,我们会在后面将其转换为HTML或者PDF。

运行下面命令生成asciidoc:

mvn swagger2markup:convertSwagger2markup 

asciidoctor-maven-plugin

有了asciidoc,我们使用asciidoctor-maven-plugin将其转换为HTML和PDF。

Asciidoctor是一种快速,开放源代码的文本处理器和发布工具链,用于将AsciiDoc内容转换为HTML5,DocBook,PDF和其他格式。 Asciidoctor用Ruby编写,可在所有主要操作系统上运行。

Asciidoctor提供了一个asciidoctor-maven-plugin,可以方便的在maven环境使用。其配置如下:

        <plugins>
            <plugin>
                <groupId>org.asciidoctor</groupId>
                <artifactId>asciidoctor-maven-plugin</artifactId>
                <version>2.0.0-RC.1</version>
                <dependencies>
                    <dependency>
                        <groupId>org.asciidoctor</groupId>
                        <artifactId>asciidoctorj-pdf</artifactId>
                        <version>1.5.0-alpha.18</version>
                    </dependency>
                    <!-- Comment this section to use the default jruby artifact provided by the plugin -->
                    <dependency>
                        <groupId>org.jruby</groupId>
                        <artifactId>jruby-complete</artifactId>
                        <version>9.2.7.0</version>
                    </dependency>
                    <!-- Comment this section to use the default AsciidoctorJ artifact provided by the plugin -->
                    <dependency>
                        <groupId>org.asciidoctor</groupId>
                        <artifactId>asciidoctorj</artifactId>
                        <version>2.0.0</version>
                    </dependency>
                </dependencies>
                <configuration>
                    <sourceDirectory>src/docs/asciidoc</sourceDirectory>
                    <!-- Attributes common to all output formats -->
                    <attributes>
                        <sourcedir>target/docs/asciidoc/generated</sourcedir>
                    </attributes>
                </configuration>
                <executions>
                    <execution>
                        <id>generate-pdf-doc</id>
                        <phase>generate-resources</phase>
                        <goals>
                            <goal>process-asciidoc</goal>
                        </goals>
                        <configuration>
                            <backend>pdf</backend>
                            <!-- Since 1.5.0-alpha.9 PDF back-end can use 'rouge' as well as 'coderay'
                            for source highlighting -->
                            <!-- Due to a known issue on windows, it is recommended to use 'coderay' until an new version of 'rouge' is released.
                            -->
                            <sourceHighlighter>coderay</sourceHighlighter>
                            <attributes>
                                <icons>font</icons>
                                <pagenums/>
                                <toc/>
                                <idprefix/>
                                <idseparator>-</idseparator>
                            </attributes>
                        </configuration>
                    </execution>
                </executions>
            </plugin>

运行下面命令生成HTML和PDF:

mvn generate-resources

使用命令行

上面讲到了,Asciidoctor是基于ruby的,有了asciidoc之后,我们也可以直接使用Asciidoctor的命令行来进行转换。步骤如下:

  1. 安装rvm:rvm是一个ruby的版本管理工具,方便使用。当然你也可以使用系统原生的ruby。ruby的版本必须在2.3以上。
  2. 安装asciidoctor-pdf:gem install asciidoctor-pdf --pre
  3. 转换pdf:asciidoctor -r asciidoctor-pdf -b pdf basic-example.adoc

PDF的中文展示

Asciidoctor可以处理全范围的UTF-8字符的字符集。这意味着你可以写你的文档中的任何语言,使用UTF-8编码的文件,并期望Asciidoctor到文本正确转换。但是,您可能会注意到PDF中缺少某些语言的某些字符,例如中文。

如果您使用非拉丁语书写,则需要使用专门的主题来提供必要的字体。例如,以从写在CJK语言文档的PDF如中国,你需要使用一个CJK主题。您可以通过安装asciidoctor-pdf-cjk-kai_gen_gothic gem获得这样的主题。

采用专用的主题,是因为PDF需要你自己提供字体来为所有字符提供字形。没有一种字体可以支持世界上所有的语言(尽管像Noto Serif之类的语言肯定会比较接近)。

因此,我们采取的策略是针对每个语言家族(例如CJK)创建单独的专用主题。当然,您可以自由地遵循这种模式,并使用选择的字体来创建自己的主题。

怎么创建主题这里就不详细讲解了,有兴趣的小伙伴可以自行查阅有关资料。

如何安装:

gem install asciidoctor-pdf-cjk-kai_gen_gothic

下载字体:asciidoctor-pdf-cjk-kai_gen_gothic-install

这个主题支持以下几种字体:

  • KaiGenGothicCN
  • KaiGenGothicJP
  • KaiGenGothicKR
  • KaiGenGothicTW

使用下面的命令来转换PDF:

asciidoctor-pdf -r asciidoctor-pdf-cjk-kai_gen_gothic -a pdf-style=THEME doc.asc

这里我遇到了一个问题,如果字体选择KaiGenGothicCN, 那么会在运行时候报错:

undefined method `strip_extended' for nil:NilClass
  Use --trace for backtrace

详细查看–trace,会发现报错的是ttfunk/table/name.rb:

@postscript_name = @strings[6].first.strip_extended

从字体中获取到的@strings[6]是空。 那么怎么办呢?

很简单,使用KaiGenGothicTW字体即可。

PDF中文主题在maven中的使用

那么有了命令行,我们怎么在maven中使用呢?

请使用如下的XML配置:

<execution>
                        <id>output-pdf</id>
                        <phase>generate-resources</phase>
                        <goals>
                            <goal>process-asciidoc</goal>
                        </goals>
                        <configuration>
                            <backend>pdf</backend>
                            <outputDirectory>target/docs/asciidoc/pdf</outputDirectory>
                            <attributes>
                                <pdf-stylesdir>/Library/Ruby/Gems/2.3.0/gems/asciidoctor-pdf-cjk-kai_gen_gothic-0.1.1/data/themes</pdf-stylesdir>
                                <pdf-style>KaiGenGothicTW</pdf-style>
                                <pdf-fontsdir>/Library/Ruby/Gems/2.3.0/gems/asciidoctor-pdf-cjk-kai_gen_gothic-0.1.1/data/fonts</pdf-fontsdir>
                                <icons>font</icons>
                                <pagenums/>
                                <toc/>
                                <idprefix/>
                                <idseparator>-</idseparator>
                            </attributes>
                        </configuration>
                    </execution>

请关注如下几个字段:

pdf-stylesdir:你安装的中文主题的目录pdf-style:中文主题的名称pdf-fontsdir: 中文主题字体的名称。

好了,本文讲到这里,有疑问的小伙伴可以发邮件或者留言提问。谢谢。

更多教程请参考 flydean的博客

今,html5开发成了很多年轻人都想学习的软件开发技术,越来越多的年轻人想从事html5开发,而html5的薪资也是一路都在飙升,想学好这门技术,好的学习资料必不可少,重庆千锋的html5基础视频教程百度网盘免费分享给大家。

千锋html5教程第1部分:课程体系解 http://pan.baidu.com/s/1o7B9OYA

千锋html5教程第2部分:微案例讲解 https://pan.baidu.com/s/1nwyNFg1

千锋H5视频教程第3部分:知识点讲解http://pan.baidu.com/s/1jICHs9o

千锋Vue组件之手机通讯录实战课程 http://pan.baidu.com/s/1c1FrXLY

千锋微信小程序基础与实战 https://pan.baidu.com/s/1xE35SQcvW0sCF2NoR_ONiw

随着html5技术越来越成熟,越来越多的行业巨头也在不断向html5示好。在未来几年,html5将会以更多的形式渗透到我们生活中的方方面面,因此越来越多的从业者开始关注html5开发行业。那么想要学好html5前端开发,需要掌握的专业技术有:

第1阶段:前端页面重构:PC端网站布局、html5+CSS3基础项目、WebAPP页面布局;

第2阶段:JavaScript高级程序设计:原生JavaScript交互功能开发、面向对象开发与ES5/ES6、JavaScript工具库自主研发;

第3阶段:PC端全栈项目开发:jQuery经典特效交互开发、HTTP协议,Ajxa进阶与后端开发、前端工程化与模块化应用、PC端网站开发、PC端管理信息系统前端开发;

第4阶段:移动端webAPP开发:Touch端项目、微信场景项目、应用Vue.js开发WebApp项目、应用Ionic开发WebApp项目、应用React.js开发WebApp;

第5阶段:混合(Hybrid)开发:各类混合应用开发;

第6阶段:NodeJS全栈开发:WebApp后端系统开发;

第7阶段:大数据可视化:数据可视化入门、D3.jS详解及项目实战。

2018年千锋教育全栈html5+课程大纲V10.0全面升级

html5课程升级后优势

课程大纲升级后,覆盖热门大数据可视化内容,深度贯穿前端后端开发,紧贴主流企业一线需求,注重项目和实战能力,真正做到项目制教学,业内罕见。

课程特色:注重全栈思维培养

全栈html5工程师不止是技术层面,千锋着力培养学员的大前端视角与全栈思维,就业后不仅有能力解决工作中的疑难问题,更有实力胜任项目leader!

html5课程升级内容

1.新增时下大热的大数据可视化内容

2.深化PHP+MySQL开发内容

3.20大项目驱动教学

如果你想快速入门html5又没有更好的学习方法的话,建议你去千锋教育免费试听试学课程,千锋为所有学员提供了长达2周的课程试听,不满意不收费,让你先了解再学习,这样的学习方式可以让你省去更多的后顾之忧。