搜索引擎优化 pdf( 获取PDF.js的方式使用说明书-PDFJS )

　　搜索引擎优化 pdf(

获取PDF.js的方式使用说明书-PDFJS

)

　　介绍

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

　　官网地址

　　下载并安装

　　官网提供了下载入口，有稳定版和Beta版，我们推荐在生产环境使用稳定版，官网为我们提供了三种获取PDF.js的方式

　　使用说明

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

　　//index.html

PDF

//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，如下

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

　　它继承了我们常用的功能，如旋转、下载、打印、自适应缩放、放大、缩小等。我们只需要使用iframe导入我们的pdf文件，其余的都由pdf完成，你就可以得到一 实现完整的pdf预览功能。

　　三层不同的 PDF.js

　　这三层PDFJS的分离，让我们可以根据业务需求实现我们想要的。它简单的 api 使我们得心应手。总之，PDFJS 是一个优秀的 PDF 预览解决方案。

　　总结

　　PDFJS不仅支持pdf二进制文件，还支持base64编码的pdf。如果您需要在项目中使用pdf预览等功能，无疑是一个不错的解决方案。当然，你要实现同样的功能。方法很多，大家可以选择最适合自己需求的，官方也提供了完整的demo，如下截图，如果觉得这篇文章对你有帮助，请转发，点赞关注，后续会分享更多有用的有趣技术！