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

本文主要是介绍vue3 电子书 pdf转图片 pdf实现翻页效果 pdfjs-dist、turn.js电子书翻页效果,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

实现效果:

一、下载插件

// 重点 pdfjs-dist 下载版本有时候 2.16.105 有效  有时候 3.4.120 有效,小编也没搞懂为什么npm install pdfjs-dist@3.4.120  //一定要下载 3.4.120 版本的,不然会有报错npm install jquery    // 使用的是 turn.js 所以需要下jquery

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

二、导入文件

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

const webpack = require('webpack')
module.exports = {// 配置jquerychainWebpack: config => {//引入ProvidePluginconfig.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' 

三、具体代码

<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.promiseconst 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.widthcanvas.height = viewport.heightconst context = canvas.getContext('2d')if (!context) {return}const renderContext = {canvasContext: context,viewport: viewport,}await page.render(renderContext).promisedivPageContent.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, //自动居中, 默认falseheight: 673, //高度width: 952, //宽度display: 'double', //单页显示/双页显示  single/doubleelevation: 50,duration: 500, //翻页速度(毫秒), 默认600msgradients: true, //翻页时的阴影渐变, 默认trueacceleration: true, //硬件加速, 默认true, 如果是触摸设备设置为truepage: 1, //设置当前显示第几页pages: pageCav.value.length, //总页数turnCorners: 'bl,br,tl,tr,l,r', // 设置可翻页的页角(都试过了,乱写 4个角都能出发卷起), bl,br   tl,tr   bl,trwhen: {//监听事件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>

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

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

这篇关于vue3 电子书 pdf转图片 pdf实现翻页效果 pdfjs-dist、turn.js电子书翻页效果的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/680914

相关文章

Springboot处理跨域的实现方式(附Demo)

《Springboot处理跨域的实现方式(附Demo)》:本文主要介绍Springboot处理跨域的实现方式(附Demo),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不... 目录Springboot处理跨域的方式1. 基本知识2. @CrossOrigin3. 全局跨域设置4.

Spring Boot 3.4.3 基于 Spring WebFlux 实现 SSE 功能(代码示例)

《SpringBoot3.4.3基于SpringWebFlux实现SSE功能(代码示例)》SpringBoot3.4.3结合SpringWebFlux实现SSE功能,为实时数据推送提供... 目录1. SSE 简介1.1 什么是 SSE?1.2 SSE 的优点1.3 适用场景2. Spring WebFlu

基于SpringBoot实现文件秒传功能

《基于SpringBoot实现文件秒传功能》在开发Web应用时,文件上传是一个常见需求,然而,当用户需要上传大文件或相同文件多次时,会造成带宽浪费和服务器存储冗余,此时可以使用文件秒传技术通过识别重复... 目录前言文件秒传原理代码实现1. 创建项目基础结构2. 创建上传存储代码3. 创建Result类4.

SpringBoot日志配置SLF4J和Logback的方法实现

《SpringBoot日志配置SLF4J和Logback的方法实现》日志记录是不可或缺的一部分,本文主要介绍了SpringBoot日志配置SLF4J和Logback的方法实现,文中通过示例代码介绍的非... 目录一、前言二、案例一:初识日志三、案例二:使用Lombok输出日志四、案例三:配置Logback一

Python如何使用__slots__实现节省内存和性能优化

《Python如何使用__slots__实现节省内存和性能优化》你有想过,一个小小的__slots__能让你的Python类内存消耗直接减半吗,没错,今天咱们要聊的就是这个让人眼前一亮的技巧,感兴趣的... 目录背景:内存吃得满满的类__slots__:你的内存管理小助手举个大概的例子:看看效果如何?1.

Python+PyQt5实现多屏幕协同播放功能

《Python+PyQt5实现多屏幕协同播放功能》在现代会议展示、数字广告、展览展示等场景中,多屏幕协同播放已成为刚需,下面我们就来看看如何利用Python和PyQt5开发一套功能强大的跨屏播控系统吧... 目录一、项目概述:突破传统播放限制二、核心技术解析2.1 多屏管理机制2.2 播放引擎设计2.3 专

Python实现无痛修改第三方库源码的方法详解

《Python实现无痛修改第三方库源码的方法详解》很多时候,我们下载的第三方库是不会有需求不满足的情况,但也有极少的情况,第三方库没有兼顾到需求,本文将介绍几个修改源码的操作,大家可以根据需求进行选择... 目录需求不符合模拟示例 1. 修改源文件2. 继承修改3. 猴子补丁4. 追踪局部变量需求不符合很

idea中创建新类时自动添加注释的实现

《idea中创建新类时自动添加注释的实现》在每次使用idea创建一个新类时,过了一段时间发现看不懂这个类是用来干嘛的,为了解决这个问题,我们可以设置在创建一个新类时自动添加注释,帮助我们理解这个类的用... 目录前言:详细操作:步骤一:点击上方的 文件(File),点击&nbmyHIgsp;设置(Setti

SpringBoot实现MD5加盐算法的示例代码

《SpringBoot实现MD5加盐算法的示例代码》加盐算法是一种用于增强密码安全性的技术,本文主要介绍了SpringBoot实现MD5加盐算法的示例代码,文中通过示例代码介绍的非常详细,对大家的学习... 目录一、什么是加盐算法二、如何实现加盐算法2.1 加盐算法代码实现2.2 注册页面中进行密码加盐2.

MySQL大表数据的分区与分库分表的实现

《MySQL大表数据的分区与分库分表的实现》数据库的分区和分库分表是两种常用的技术方案,本文主要介绍了MySQL大表数据的分区与分库分表的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有... 目录1. mysql大表数据的分区1.1 什么是分区?1.2 分区的类型1.3 分区的优点1.4 分