vue使用pdfjs+turn.js实现翻页

碰到一个需要实现PDF翻书效果，找到一些大佬的文章，记录一下，以防下次忘记。

参考链接：https://blog.csdn.net/sinat_38628334/article/details/129108878

大致思路就是，先将PDF解析成图片，再将图片做成翻书特效。

1.安装 pdfjs-dist 插件，将PDF文件转换成canvas图片

安装：建议安装指定版本，看别的文章说其它版本会有问题，我最开始安装的就是建议版本，所以没有遇到

npm install pdf-dist@2.2.228 --save

引用

import * as pdfjs from 'pdfjs-dist'
import * as pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry' 
pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker

使用

// pdfjs文档 https://mozilla.github.io/pdf.js/examples​
async handlePdf(fileUrl) {
    let that = this
    // fileUrl: PDF文件路径，线上路径可能有跨域问题，需要后台配合
    const pdf = await pdfjs.getDocument(fileUrl).promise;
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');

    for (let i = 1; i <= pdf._pdfInfo.numPages; i++) {
      const page = await pdf.getPage(i);
      // 获取页的尺寸
      const viewport = page.getViewport({scale: 1});

      // 设置canvas的尺寸
      canvas.width = viewport.width;
      canvas.height = viewport.height;

      // 将pdf页渲染到canvas上
      let renderContext = {
          canvasContext: context,
          viewport: viewport,
      };
      await page.render(renderContext).promise;

      // 生成image图片  
      let imgUrl = canvas.toDataURL('image/png')

      // 将图片存入“imgFiles”中  
      that.imgFiles.push(imgUrl)
    }
}

PDF文件有时会有其它字体，转图片可能会识别不到，导致生成的图片部分内容缺失，当前项目这个问题暂时忽略，但找到参考文章：https://juejin.cn/post/7003255148042518558

2.使用turn.js插件实现翻页效果

官网下载：http://www.turnjs.com/

因为turn.js是依赖于jQuery，所以还需要安装jQuery

jQuery配置：因为我用的是vue2，所以是在build目录下的webpack.base.conf.js

module.exports = {
    // 加入以下代码
    plugins: [
        new webpack.ProvidePlugin({
          jQuery: "jquery",
          $: "jquery"
        })
    ]

}

引用

import $ from "jquery";
import turn from "../assets/js/turn.js";

 使用

onTurn(){
      this.$nextTick(() => {
        $('#turnpage').turn({
            acceleration: true, //启用硬件加速,移动端有效
            display: 'double', //显示：single=单页，double=双页，默认双页
            duration: 500, // 翻页撒开鼠标，页面的延迟
            page: 1, // 默认显示第几页
            gradients: true, // 折叠处的光泽渐变，主要体现翻页的立体感、真实感
            autoCenter: true, //
            turnCorners: 'bl,br', // 设置可翻页的页角(都试过了，乱写 4个角都能出发卷起)， bl,br   tl,tr   bl,tr
            height: 800, //页面高度
            width: 1200, //翻书范围宽度，总宽度
        })
      })
}

以上是实现翻书效果的所有过程，还有一些翻书页面的细节或样式没有整理，可参考turn.js官方文档或其他文章。

我写时觉得需要引入jQuery太过冗杂，所有参考其它网站，简化动画效果，写了一个，记录于下一篇。