vue3 电子书 pdf转图片 pdf实现翻页效果 pdfjs-dist、turn.js电子书翻页效果

实现效果：

一、下载插件

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

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

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

下载 turn.js 这里使用的是  turn4  ，需要下载到本地引入，通过npm下载会报错可以到官网下载，也可以直接在本博客下，已经上传到博客

二、导入文件

导入文件之前先创建  vue.config.js 适配一下jquery ，创建好文件以后，把以下代码复制进去

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

回到vue页面，导入以下文件

// 引入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' 

三、具体代码

参考博客：GitHub - chouchoui/pdf-page-flip-viewer: 使用 PDF.js 和 page-flip 实现 PDF 翻页浏览效果

GitHub - xiangyouwu/vue3-pdfjs-dist-turn: 基于 pdfjs-dist 和 turn.js 的pdf转电子书案例