第23车厢-在网页中预览pdf—pdf.js简易版应用篇

本篇介绍JS插件pdf.js简易应用篇

今天介绍透过插件pdf.js在网页中直接浏览pdf

官网: https://mozilla.github.io/pdf.js/
官网范例:https://mozilla.github.io/pdf.js/examples/

起手式

介绍Dounload版的，因为CDN版的话官网有介绍
首先下载至电脑

其他下载方式可看 https://mozilla.github.io/pdf.js/getting_started/

▼ 本地下载之後，资料匣名称为"pdfjs-2.10.377-dist.zip"
解压缩後 > 新增一专案资料夹 > 将下载包放到Visual Studio Code执行

本篇分享两种
1.使用Pdf.js 的 viewer.js 可以直接有放大缩小列印等功能
2.使用Pdf.js 搭配官网范例js 将PDF文件渲染成Canvas

1.viewer.js

整体资料匣 + 要用的东西

引入

"pdfjs-2.10.377-dist.zip" 我改命名为"pdfjs-dist" (不一定要改名字)

  <link rel="stylesheet"
        href="pdfjs-dist/web/viewer.css"> //pdf查看器样式
  <link rel="stylesheet"
        href="pdfjs-dist/web/locale/locale.properties"> //资源文件

  <script src="pdfjs-dist/build/pdf.js"></script> // 核心
  <script src="pdfjs-dist/web/viewer.js"></script> // viewer.html是pdf查看器

使用iframe嵌入在网页中

HTML
src="pdfjs-dist/web/viewer.html?file=/pdf/五倍券懒人包.pdf"
/pdf/五倍券懒人包.pdf 为我自己资料匣要抓的pdf档案路径
pdfjs-dist/web/viewer.html?file= 前面要加这段，pdfjs-dist/是我下载包的资料匣名称

<div style="width: 80%;margin: auto;">
    <iframe src="pdfjs-dist/web/viewer.html?file=/pdf/五倍券懒人包.pdf"
            width="100%"
            height="500px"
            frameborder="0"
            border="0"
            cellspacing="0"></iframe>
  </div>

这样就完成啦！

2.渲染成canvas

整体资料匣 + 要用的东西

引入

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js'></script>
  <script src="pdfjs-dist/build/pdf.js"></script>
  <script src="runpdf.js"></script> // 为自行新增的js

HTML

预先准备好容器canvas

<div>
  <button id="prev">上一页</button>
  <button id="next">下一页</button>
     
  <span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
</div>

<canvas id="the-canvas" ></canvas>

JS (我资料匣命名为runpdf.js)

var url = 'pdf/compressed.pdf'; //这边是要秀的pdf
pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdfjs-dist/build/pdf.worker.js'; //这边抓资料匣命名的bulid底下的worker.js
scale 可以调整

// If absolute URL from the remote server is provided, configure the CORS
// header on that server.
var url = 'pdf/compressed.pdf'; //这边是要秀的pdf

$(function() {
// Loaded via <script> tag, create shortcut to access PDF.js exports.
var pdfjsLib = window['pdfjs-dist/build/pdf'];

// The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdfjs-dist/build/pdf.worker.js'; //这边抓我资料匣命名的bulid底下的worker.js

var pdfDoc = null,
    pageNum = 1,
    pageRendering = false,
    pageNumPending = null,
    scale = 1 // 这边可以缩放
    canvas = document.getElementById('the-canvas'), // 抓html ID
    ctx = canvas.getContext('2d');

/**
 * Get page info from document, resize canvas accordingly, and render page.
 * @param num Page number.
 */
function renderPage(num) {
  pageRendering = true;
  // Using promise to fetch the page
  pdfDoc.getPage(num).then(function(page) {
    var viewport = page.getViewport({scale: scale});
    canvas.height = viewport.height;
    canvas.width = viewport.width;

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

    // Wait for rendering to finish
    renderTask.promise.then(function() {
      pageRendering = false;
      if (pageNumPending !== null) {
        // New page rendering is pending
        renderPage(pageNumPending);
        pageNumPending = null;
      }
    });
  });

  // Update page counters
  document.getElementById('page_num').textContent = num;
}

/**
 * If another page rendering in progress, waits until the rendering is
 * finised. Otherwise, executes rendering immediately.
 */
function queueRenderPage(num) {
  if (pageRendering) {
    pageNumPending = num;
  } else {
    renderPage(num);
  }
}

/**
 * Displays previous page.
 */
function onPrevPage() {
  if (pageNum <= 1) {
    return;
  }
  pageNum--;
  queueRenderPage(pageNum);
}
document.getElementById('prev').addEventListener('click', onPrevPage);

/**
 * Displays next page.
 */
function onNextPage() {
  if (pageNum >= pdfDoc.numPages) {
    return;
  }
  pageNum++;
  queueRenderPage(pageNum);
}
document.getElementById('next').addEventListener('click', onNextPage);

/**
 * Asynchronously downloads PDF.
 */
pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
  pdfDoc = pdfDoc_;
  document.getElementById('page_count').textContent = pdfDoc.numPages;

  // Initial/first page rendering
  renderPage(pageNum);
});
});

这样就完成啦！ ▲ 此段js基本上是透过官网范例贴上