pdf.js源码学习从helloworld开始

最新推荐文章于 2024-08-13 08:12:38 发布

张秀琦

最新推荐文章于 2024-08-13 08:12:38 发布

阅读量1.9k

点赞数

分类专栏： pdf 文章标签： pdf

本文链接：https://blog.csdn.net/zxq_513/article/details/55509802

版权

pdf 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

首先我们先在web服务器下新建一个helloworld文件夹，把我们编译好的pdf.js和pdf.worker.js拷贝到该目录下然后再创建一个hello.js和一个hello.html得到如下图文件目录：
这里写图片描述
hello.js代码如下：


'use strict';

//
// Fetch the PDF document from the URL using promises
//
//使用pdf.js内置的对象PDFJS读取pdf文件
PDFJS.getDocument('helloworld.pdf').then(function(pdf) {
  // Using promise to fetch the page
  //获取文档第一页
  pdf.getPage(1).then(function(page) {
    var scale = 1.5;
    var viewport = page.getViewport(scale);
    //
    // Prepare canvas using PDF page dimensions
    //获取文档第一页内容并显示在画布上
    var canvas = document.getElementById('the-canvas');
    var context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    //
    // Render PDF page into canvas context
    //
    var renderContext = {
      canvasContext: context,
      viewport: viewport
    };
    page.render(renderContext);
  });
});

hello.html

<!doctype html>
<html>

<head>
<!--引入pdf.js和pdf.worker.js-->
  <script src="pdf.js"></script>
  <script>
    PDFJS.workerSrc="pdf.worker.js";
  </script>
  <script src="hello.js"></script>
</head>

<body>
    <!--定义一个画布-->
  <canvas id="the-canvas" style="border:1px solid black;"/>
</body>

</html>