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

相关文章

Java的栈与队列实现代码解析

《Java的栈与队列实现代码解析》栈是常见的线性数据结构,栈的特点是以先进后出的形式,后进先出,先进后出,分为栈底和栈顶,栈应用于内存的分配,表达式求值,存储临时的数据和方法的调用等,本文给大家介绍J... 目录栈的概念(Stack)栈的实现代码队列(Queue)模拟实现队列(双链表实现)循环队列(循环数组

使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)

《使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)》PPT是一种高效的信息展示工具,广泛应用于教育、商务和设计等多个领域,PPT文档中常常包含丰富的图片内容,这些图片不仅提升了... 目录一、引言二、环境与工具三、python 提取PPT背景图片3.1 提取幻灯片背景图片3.2 提取

C++如何通过Qt反射机制实现数据类序列化

《C++如何通过Qt反射机制实现数据类序列化》在C++工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作,所以本文就来聊聊C++如何通过Qt反射机制实现数据类序列化吧... 目录设计预期设计思路代码实现使用方法在 C++ 工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作。由于数据类

Python实现图片分割的多种方法总结

《Python实现图片分割的多种方法总结》图片分割是图像处理中的一个重要任务,它的目标是将图像划分为多个区域或者对象,本文为大家整理了一些常用的分割方法,大家可以根据需求自行选择... 目录1. 基于传统图像处理的分割方法(1) 使用固定阈值分割图片(2) 自适应阈值分割(3) 使用图像边缘检测分割(4)

Android实现在线预览office文档的示例详解

《Android实现在线预览office文档的示例详解》在移动端展示在线Office文档(如Word、Excel、PPT)是一项常见需求,这篇文章为大家重点介绍了两种方案的实现方法,希望对大家有一定的... 目录一、项目概述二、相关技术知识三、实现思路3.1 方案一:WebView + Office Onl

C# foreach 循环中获取索引的实现方式

《C#foreach循环中获取索引的实现方式》:本文主要介绍C#foreach循环中获取索引的实现方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、手动维护索引变量二、LINQ Select + 元组解构三、扩展方法封装索引四、使用 for 循环替代

Spring Security+JWT如何实现前后端分离权限控制

《SpringSecurity+JWT如何实现前后端分离权限控制》本篇将手把手教你用SpringSecurity+JWT搭建一套完整的登录认证与权限控制体系,具有很好的参考价值,希望对大家... 目录Spring Security+JWT实现前后端分离权限控制实战一、为什么要用 JWT?二、JWT 基本结构

Java实现优雅日期处理的方案详解

《Java实现优雅日期处理的方案详解》在我们的日常工作中,需要经常处理各种格式,各种类似的的日期或者时间,下面我们就来看看如何使用java处理这样的日期问题吧,感兴趣的小伙伴可以跟随小编一起学习一下... 目录前言一、日期的坑1.1 日期格式化陷阱1.2 时区转换二、优雅方案的进阶之路2.1 线程安全重构2

Android实现两台手机屏幕共享和远程控制功能

《Android实现两台手机屏幕共享和远程控制功能》在远程协助、在线教学、技术支持等多种场景下,实时获得另一部移动设备的屏幕画面,并对其进行操作,具有极高的应用价值,本项目旨在实现两台Android手... 目录一、项目概述二、相关知识2.1 MediaProjection API2.2 Socket 网络

使用Python实现图像LBP特征提取的操作方法

《使用Python实现图像LBP特征提取的操作方法》LBP特征叫做局部二值模式,常用于纹理特征提取,并在纹理分类中具有较强的区分能力,本文给大家介绍了如何使用Python实现图像LBP特征提取的操作方... 目录一、LBP特征介绍二、LBP特征描述三、一些改进版本的LBP1.圆形LBP算子2.旋转不变的LB