HTML5培训：使用HTML 5 PDF查看器查看PDF文件

了在你的HMTL5 网站上查看PDF 文件，你要将它们嵌入到HTML5 PDF 查看器中。像Chrome这样的浏览器已经有一个插件可以做到这一点，因此，你的PDF 文件将正确显示给使用Chrome浏览器访问你网站的人。不过，还有使用插件的替代方法。例如，AdobeInDesign 将帮助你构建交互式pdf。还有其他提示和技巧可用于呈现你的PDF文件，以便每个人都可以查看它们。想了解更多的查看方法，可以考虑报个HMTL5培训班，有专业导师面授教学，课程紧随企业需求，培养全栈开发人才。

获取HTML5 PDF 查看器

网络上有许多HTML5 PDF 查看器。例如，这些网站都可以提供在你的网站上使用的PDF查看器，并且所有浏览器都应该能够查看你的文件：IDR解决方案、PDF项目、软纸项目、非常PDF。

你上传文件并选择HTML5，然后输出你需要嵌入网页的代码。当有人访问你的网页时，他们将能够在查看器中查看你的PDF 文件，而不是弹出链接。这些大多数PDF查看器网站也有出售软件，这样你就可以在计算机上拥有它的副本，而不必去他们的网站在线使用它。拥有该软件的副本可以保护你的PDF副本（如果它受版权保护），并且通常还会为你提供更好的软件版本。如果你想从事HTML5开发，又不知道从何学起，HMTL5培训学习就是一个不错的选择，不只是学习理论知识，还有实践项目的操作训练，让学生学以致用，提升学员全局性思维和全栈技术能力。

将PDF 文件转换为HTML5

你可以将PDF 文件转换为HTML5，以便每个人都能很好地查看你的文件。这样，你就不必担心别人看不到文件，因为他们的浏览器没有插件来查看它，或者你的插件不适用于他们的计算机或浏览器。所以有人会看不到你的文件。

HTML5– 新方式

除了大多数设计师、Apple和Adobe 使用HTML5来创建他们的东西，使用HTML5 的另一个好处是新改进的页面标题。你可以使用一些有意义的东西，如

移动设备是在网站上使用HTML5的一个重要原因。现在每个人都用手机，会产生巨大的访问量，如果你的网站要接触到这些移动用户，那么你就要使用HTML5编写内容。

有很多方法可以在你的网站上完成HTML5 PDF 查看器。你可以嵌入代码，也可以使用插件。还有一些网站提供免费的在线代码生成器，为你编写代码，这样你的PDF文件就会像杂志一样显示，用户可以直接在你的网站上阅读。如果你想了解有关HTML5的更多信息，可以参加HTML5培训班学习，能够快速掌握更系统全面的HTML5知识，让你在短时间内学有所成。

了解更多

言

PDF文件现在在许多企业中常用 - 无论您是要生成销售报告，交付合同还是发送发票，PDF都是首选的文件类型。PDF.js是由Mozilla编写的JavaScript库。由于它使用vanilla JavaScript实现PDF渲染，因此它具有跨浏览器兼容性，并且不需要安装其他插件。在使用PDFJS之前你也可以先了解下原生的PDF<object>对象，本文仅介绍PDFJS。

官网地址

https://mozilla.github.io/pdf.js/

下载和安装

官网提供了下载入口,有稳定版和Beta版,我们要在生产环境下使用建议使用稳定版,官网给我们提供了三种获取PDF.js的方式

使用说明

我们可以直接使用cdn服务，也可以将下载的文件引入，我们看一下示例代码，这里我提供了两种写法，在项目运行之前，请确保你的同级目录下有一个test.pdf文件

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.943/build/pdf.min.js"></script>
 <script src='./index.js'></script>
 <title>PDF</title>
</head>
<body>
 <canvas id="pdf"></canvas>
</body>
</html>
//index.js
// var loadingTask = pdfjsLib.getDocument("test.pdf");
// loadingTask.promise.then(
// function(pdf) {
// // 加载第一页
// pdf.getPage(1).then(function(page) {
// var scale = 1;
// var viewport = page.getViewport(scale);
// //应用到页面的canvas上.
// var canvas = document.getElementById("pdf");
// var context = canvas.getContext("2d");
// canvas.height = viewport.height;
// canvas.width = viewport.width;
// // 渲染canvas.
// var renderContext = {
// canvasContext: context,
// viewport: viewport
// };
// page.render(renderContext).then(function() {
// console.log("Page rendered!");
// });
// });
// },
// function(reason) {
// console.error(reason);
// }
// );
// index.js
(async () => {
 const loadingTask = pdfjsLib.getDocument("test.pdf");
 const pdf = await loadingTask.promise;
 // 加载第一页.
 const page = await pdf.getPage(1);
 const scale = 1;
 const viewport = page.getViewport(scale);
 // 应用到页面的canvas上.
 const canvas = document.getElementById("pdf");
 const context = canvas.getContext("2d");
 canvas.height = viewport.height;
 canvas.width = viewport.width;
 // 渲染canvas.
 const renderContext = {
 canvasContext: context,
 viewport: viewport
 };
 await page.render(renderContext);
})();

当我们运行项目之后，打开浏览器查看，它已经将pdf的内容渲染到了浏览器中，且显示了第一页，如下图所示：

如果就这样的话远远是无法满足我们使用的，因此我们来看一下它比较高级的用法，或者说简单的用法，高级的功能。

使用iframe

首先我们将我们下载的js包加压，复制里面的web文件夹，粘贴到你的项目目录

然后修改你的index.html代码，首先注释掉之前引入的js代码，然后修改body，如下

<body>
 <iframe src="test.pdf" style="border: none;" width="100%" height='1000px'></iframe>
</body>

随后打开我们的浏览器，你会发现一个预览的窗口

它继承了我们常用的功能，比如旋转、下载、打印、自适应缩放、放大、缩小等，我们只需要使用iframe引入我们的pdf文件即可，其余的全部交给pdf来完成，即可获得一个实现一个完整的pdf预览功能。

PDF.js三个不同层

核心 - PDF的二进制格式在此层中进行解释。直接使用该层被认为是高级用法。
显示 - 该层构建在核心层之上，为大多数日常工作提供易于使用的界面。
Viewer - 除了提供编程API之外，PDF.js还附带一个现成的用户界面，其中包括对搜索，旋转，缩略图侧边栏和许多其他内容的支持。

PDFJS的这三层分开，让我们很好的来根据业务需求来实现我们想要的部分，其简单的api让我们得心应手，总而言之，PDFJS是一个绝佳的PDF预览解决方案。

总结

PDFJS不仅仅支持pdf的二进制文件，同样还支持base64编码的pdf，如果在你的项目中需要用到pdf的预览等功能，无疑它是一种良好的解决方案，当然想要实现相同的功能有许多办法，我们可以选择最适合我们需求的，官方还提供了一个完整的演示Demo，如下截图，如果你觉得本文对你有帮助，请麻烦转发、点赞加关注吧，后续会分享更多实用有趣的技术！

绍

和往常一样，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，唯一需要注意的就是解决字体问题，但是上文也提到过解决方案，感兴趣的可以进行体验！

在线咨询

上一篇：HTML网页中的图形是如何对齐的？有什么方法可以使它们对齐？
下一篇：推荐50个超实用的 Chrome 扩展，建议收藏

您的项目需求

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

整合营销服务商