效果预览

点击文档右侧或左侧可以翻页。

上一页
下一页

具体实现

在themes/butterfly/source/css文件夹下面新建文件book.css，文件内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/* 一些book需要的css寫在這裏 */
.book-viewer {
    position: relative;


}
.book-viewer .read-wrapper .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
}

.book-viewer .read-wrapper .mask .prev-page {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 30%;
    height: 100%;    
}
.book-viewer .read-wrapper .mask .next-page {
    position: absolute;
    top: 0%;
    right: 0%;
    width: 30%;
    height: 100%;  
}


接下来，下载pdf.js和pdf.worker.js，下载链接为https://mozilla.github.io/pdf.js/getting_started/#download。然后将这两个文件拷贝到themes/butterfly/source/js文件夹下。
还是在themes/butterfly/source/js文件夹下，创建一个新文件book.js。内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
(function book() {
  // var url = '你要展示的pdf文件路径'; //這邊是要秀的pdf
  var pdfDoc = null,
    pageNum = 1,
    pageRendering = false,
    pageNumPending = null,
    canvas = document.getElementById('the-book'), // 抓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) {
      // 直接按照783来配scale
      var viewport = page.getViewport({ scale: 2 });

      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;
        }
      });
    });
  }

  /**
   * 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.GlobalWorkerOptions.workerSrc = '/js/pdf.worker.js';
  pdfjsLib.getDocument(url).promise.then(function (pdfDoc_) {
    pdfDoc = pdfDoc_; /*PDFDocumentProxy*/
    renderPage(pageNum);
  });
})();

最后，使用npx hexo n xxx命令创建一个新的博客文档，添加如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<script src="/js/pdf.js"></script>
<!-- 導入需要的css -->
<link rel="stylesheet" href="/css/book.css">

<div class="book-viewer">

<div class="read-wrapper">
  <canvas id="the-book" style="width:100%"></canvas>
  <!-- 在这里添加覆盖层，以便翻页 -->
  <div class="mask">
    <div class="prev-page" id="prev"></div>
    <!-- <div class="menu"></div> -->
    <div class="next-page" id="next"></div>
  </div>
</div>

<div class="read-footer">
    <div class="footer-prev">
        <div id="prev-btn" class="btn-beautify larger green" target="_blank" rel="noopener" title="上一页"><i class="far fa-hand-point-left"></i><span>上一页</span></div>
    </div>
    <div class="footer-next">
        <div id="next-btn" class="btn-beautify larger green" target="_blank" rel="noopener" title="下一页"><i class="far fa-hand-point-right"></i><span>下一页</span></div>
    </div>
</div>

</div>
<script>
    var url = 'https://cdn.jsdelivr.net/gh/Qiu-Weidong/blog/resources/pdf/周髀程式释注.pdf'
</script>
<script src="/js/book.js" ></script>