阅读 478

移动端在线预览PDF插件,PDFJS API

官网地址

mozilla.github.io/pdf.js/

使用方法

HTML
<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>
<canvas id="the-canvas"></canvas>
复制代码

JavaScript

var url = 'http://www.sse.com.cn/disclosure/listedinfo/announcement/c/new/2021-06-30/600771_20210630_1_ekvsRjDV.pdf';
var pdfjsLib = window['pdfjs-dist/build/pdf'];

pdfjsLib.GlobalWorkerOptions.workerSrc = '***(你本地目录)/pdf.worker.js';

var loadingPdf = pdfjsLib.getDocument({
    url: url
});

loadingPdf.promise.then(function(pdf) {
  console.log('PDF 已经加载');
  var pageNumber = 1;
  pdf.getPage(pageNumber).then(function(page) {
    console.log('加载第一页');
    var scale = 1;
    var viewport = page.getViewport({scale: scale});
    var canvas = document.getElementById('the-canvas');
    var context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    var renderContext = {
      canvasContext: context,
      viewport: viewport
    };
    var renderTask = page.render(renderContext);
    renderTask.promise.then(function () {
      console.log('第一页已经加载完成');
    });
  });
}, function (reason) {
    // 加载报错
  console.error(reason);
});
复制代码

API

属性说明类型默认值
urlPDF的url地址String | URL-
data二进制 PDF 数据。使用类型化数组 (Uint8Array) 来提高内存使用率。如果 PDF 数据是 BASE64 编码的,请先使用 atob() 将其转换为二进制字符串。TypedArray | Array. | String-
httpHeaders基本身份验证请求头Object-
withCredentials指示是否应使用 cookie 或授权标头等凭据发出跨站点访问控制请求。Booleanfalse
password用于解密受密码保护的 PDFString-
initialData带有第一部分或全部 pdf 数据的类型化数组。由扩展使用,因为在切换到范围请求之前已经加载了一些数据。TypedArray-
lengthPDF 文件长度。它用于进度报告和范围请求操作Number-
range允许使用自定义范围PDFDataRangeTransport-
rangeChunkSize指定每个范围请求获取的最大字节数NumberDEFAULT_RANGE_CHUNK_SIZE
worker用于加载和解析 PDF 数据的工作器PDFWorker-
verbosity控制日志记录级别;应该使用 VerbosityLevel 中的常量Number-
docBaseUrl文档的基本 URL,在尝试恢复注释和大纲项的有效绝对 URL 时使用,(错误地)仅指定了相对 URLstring-
cMapUrl预定义 Adobe CMap 所在的 URL。包括尾部斜杠String-
cMapPacked指定 Adobe CMap 是否是二进制打包Boolean-
CMapReaderFactory自定义工厂对于没有 Fetch API 或 XMLHttpRequest 支持的环境很有用,例如 Node.jsObject{DOMCMapReaderFactory}
useSystemFonts是否使用系统字体Booleanfalse
standardFontDataUrl标准字体文件所在的地址。包括尾部斜杠String-
StandardFontDataFactory读取标准字体文件时将使用的工厂。提供自定义工厂对于没有 Fetch API 或 XMLHttpRequest 支持的环境很有用,例如 Node.jsObject{DOMStandardFontDataFactory}
useWorkerFetch在读取 CMap 和标准字体文件时启用在工作线程中使用 Fetch API。当为“true”时,会忽略“CMapReaderFactory”和“StandardFontDataFactory”选项。 Web 环境中的默认值为 true,Node.js 中的默认值为 falseBoolean-
stopAtErrors拒绝某些方法,例如getOperatorListgetTextContentRenderTask,当相关的 PDF 数据无法成功解析时,而不是尝试恢复任何可能的数据Booleanfalse
maxImageSize总像素中允许的最大图像大小,即宽 * 高。不会呈现高于此值的图像。使用 -1 表示没有限制,这也是默认值Number-
isEvalSupported确定我们是否可以将字符串评估为 JavaScript。主要用于提高字体渲染的性能,以及解析 PDF 函数时Booleantrue
disableFontFace默认情况下,字体会转换为 OpenType 字体并通过字体加载 API 或@font-face 规则加载。如果禁用,字体将使用内置字体渲染器渲染,该渲染器使用原始路径命令构建字形。Boolean-
fontExtraProperties从工作线程导出解析的字体数据时,包括在渲染 PDF 文档期间未使用的其他属性,这对于调试目的(和向后兼容性)可能很有用,但请注意,它会导致内存使用量增加Booleanfalse
enableXfa渲染 Xfa 表格Booleanfalse
ownerDocument指定一个显式的文档上下文来创建元素并将资源(例如字体)加载到其中HTMLDocument-
disableRange禁用 PDF 文件的范围请求加载。启用后,如果服务器支持部分内容请求,则 PDF 将分块获取Booleanfalse
disableStream禁用 PDF 文件数据的流式传输。默认情况下,PDF.js 尝试分块加载 PDF 文件Objectfalse
disableAutoFetch禁用预取 PDF 文件数据。启用范围请求后,即使不需要显示当前页面,PDF.js 也会自动继续获取更多数据Objectfalse
pdfBug启用用于调试 PDF.js 的特殊钩子(请参阅web / debugger.jsObjectfalse
文章分类
前端
文章标签