vue3 e-book pdf to picture pdf to achieve page turning effect pdfjs-dist, turn.js e-book page turning effect

Realize the effect:

1. Download the plug-in

// 重点 pdfjs-dist 下载版本有时候 2.16.105 有效  有时候 3.4.120 有效，小编也没搞懂为什么

npm install [email protected]  //一定要下载 3.4.120 版本的，不然会有报错

npm install jquery    // 使用的是 turn.js 所以需要下jquery

Download turn.js Here is turn4, which needs to be downloaded to the local import. Downloading through npm will report an error. You can download it from the official website, or directly under this blog, which has been uploaded to the blog

2. Import files

Before importing the file, create   vue.config.js to adapt jquery. After creating the file, copy the following code into it

const webpack = require('webpack')
module.exports = {
   // 配置jquery
     chainWebpack: config => {
       //引入ProvidePlugin
       config.plugin("provide").use(webpack.ProvidePlugin, [{
           $: "jquery",
           jquery: "jquery",
           jQuery: "jquery",
           "window.jQuery": "jquery",
       }, ]);
     },
}

Go back to the vue page and import the following files

// 引入jquery
import $ from 'jquery'
 
// 这里也可以通过 import turn from '@/utils/turnjs4/lib/turn.js' 来引入，不过引入的文件并不会执行
import '@/utils/turnjs4/lib/turn.js'

// 引入 pdfjs-dist 包
import * as pdfjs from 'pdfjs-dist'

// 导入 pdf 文件
import url_01 from '@/assets/pdf/03-1.pdf'

// 这个文件地址一定要找对，我是放在public里面所以用 / ，这个文件我也会放到本博客里面
pdfjs.GlobalWorkerOptions.workerSrc = '/pdf.worker.js' 

3. Specific code

<template>
  <div class="box">
    <div id="flipbook"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, onMounted } from 'vue'
import $ from 'jquery'
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import '@/utils/turnjs4/lib/turn.js'
import * as pdfjs from 'pdfjs-dist'
import url_01 from '@/assets/pdf/03-1.pdf'

pdfjs.GlobalWorkerOptions.workerSrc = '/pdf.worker.js' //这个文件地址一定要找对，我是放在public里面所以用 /

const pdfInit = async (url) => {
  // 获取元素
  const pdfContainer = document.querySelector('#flipbook')
  if (!pdfContainer) {
    return
  }

  const loadingTask = pdfjs.getDocument({
    url: url,
  })
  const pdf = await loadingTask.promise
  const container: any = document.querySelector('#flipbook')

  for (let index = 0; index < pdf.numPages; index++) {
    const page = await pdf.getPage(index + 1)
    const viewport = page.getViewport({ scale: 0.8 })
    console.log(viewport)

    const divPage = document.createElement('div')
    divPage.classList.add('page')
    const divPageContent = document.createElement('div')
    divPageContent.classList.add('page-content')
    const canvas = document.createElement('canvas')
    canvas.width = viewport.width
    canvas.height = viewport.height
    const context = canvas.getContext('2d')
    if (!context) {
      return
    }
    const renderContext = {
      canvasContext: context,
      viewport: viewport,
    }
    await page.render(renderContext).promise
    divPageContent.appendChild(canvas)
    divPage.appendChild(divPageContent)
    container.appendChild(divPage)
  }
}

// 页数
const pageCav = ref<any>([])

const currentPage = ref(1)

onMounted(async () => {
  await pdfInit(url_01)

  pageCav.value = document.querySelectorAll('#flipbook .page')
  await onTurn()
})

const onTurn = () => {
  $('#flipbook').turn({
    autoCenter: true, //自动居中, 默认false
    height: 673, //高度
    width: 952, //宽度
    display: 'double', //单页显示/双页显示  single/double
    elevation: 50,
    duration: 500, //翻页速度(毫秒), 默认600ms
    gradients: true, //翻页时的阴影渐变, 默认true
    acceleration: true, //硬件加速, 默认true, 如果是触摸设备设置为true
    page: 1, //设置当前显示第几页
    pages: pageCav.value.length, //总页数
    turnCorners: 'bl,br,tl,tr,l,r', // 设置可翻页的页角(都试过了，乱写 4个角都能出发卷起)， bl,br   tl,tr   bl,tr
    when: {
      //监听事件
      turning: async function (e, page, view) {
        console.log(e, page, view)
        // 翻页前触发
      },
      turned: function (e, page) {
        console.log(e, page, pageCav.value.length)
        currentPage.value = page
        // 翻页后触发
      },
    },
  })
}
</script>

<style scoped lang="less">
.box {
  width: 952px;
  box-shadow: 0 4px 10px #666;
}
</style>

Reference blog: GitHub - chouchoui/pdf-page-flip-viewer: Use PDF.js and page-flip to achieve PDF page flip browsing effect

GitHub - xiangyouwu/vue3-pdfjs-dist-turn: A case of converting pdf to e-book based on pdfjs-dist and turn.js