pdf功能设置
This commit is contained in:
parent
db496ee154
commit
29ad68e5ab
|
@ -34,6 +34,8 @@ import { handleevent, savecanvsStore, initcanvasdata, displayData } from '@/util
|
||||||
import { fabricVue, TYPES } from '@/plugins/fabric'
|
import { fabricVue, TYPES } from '@/plugins/fabric'
|
||||||
import { updateSmartBookMarkContent, addsmartBookMark,getBookMarkById } from '@/api/eTextbook/index'
|
import { updateSmartBookMarkContent, addsmartBookMark,getBookMarkById } from '@/api/eTextbook/index'
|
||||||
import {useToolState} from '@/store/modules/tool'
|
import {useToolState} from '@/store/modules/tool'
|
||||||
|
const { ipcRenderer } = require('electron')
|
||||||
|
|
||||||
const toolState = useToolState();
|
const toolState = useToolState();
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
pdfObj: {
|
pdfObj: {
|
||||||
|
@ -116,7 +118,43 @@ const renderPage = async (canvasobj) => {
|
||||||
// })
|
// })
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
// 保存数据
|
||||||
|
const savaDataStore = () => {
|
||||||
|
imgarr.value.forEach((a) => {
|
||||||
|
if (a.index == 0) {
|
||||||
|
a.JSONdata = canvasFabricVue.value.canvas.toJSON()
|
||||||
|
} else {
|
||||||
|
a.JSONdata = canvas1FabricVue.value.canvas.toJSON()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const nameMap = new Map(canvsStore.pageArr.map((item) => [item.page, item.id]))
|
||||||
|
// 创建一个用于存储所有异步操作的数组
|
||||||
|
let promises = []
|
||||||
|
imgarr.value.forEach((item) => {
|
||||||
|
if (nameMap.has(item.page)) {
|
||||||
|
const params = {
|
||||||
|
id: nameMap.get(item.page),
|
||||||
|
contentData: JSON.stringify(item.JSONdata.objects)
|
||||||
|
}
|
||||||
|
promises.push(updateSmartBookMarkContent([params]))
|
||||||
|
} else {
|
||||||
|
promises.push(addsmartBookMark({
|
||||||
|
pageNum: item.page,
|
||||||
|
contentData: JSON.stringify(item.JSONdata.objects),
|
||||||
|
bookId: props.pdfObj.bookId,
|
||||||
|
type: '教材',
|
||||||
|
source: 'smarttalk'
|
||||||
|
}))
|
||||||
|
|
||||||
|
}
|
||||||
|
})
|
||||||
|
Promise.all(promises).then(res=>{
|
||||||
|
toolState.isPdfWin=false
|
||||||
|
toolState.showBoardAll=true //恢复默认值
|
||||||
|
// ipcRenderer.send('tool-sphere:reset') //重置tool状态
|
||||||
|
ipcRenderer.send('open-PDF:minimize')
|
||||||
|
})
|
||||||
|
}
|
||||||
const updatePage = (canvasobj) => {
|
const updatePage = (canvasobj) => {
|
||||||
renderPage(canvasobj)
|
renderPage(canvasobj)
|
||||||
}
|
}
|
||||||
|
@ -236,9 +274,9 @@ const initPdfone = async () => {
|
||||||
}
|
}
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
try {
|
try {
|
||||||
|
// 获取页数
|
||||||
const pdf = await pdfjsLib.getDocument(props.pdfObj.pdfUrl).promise
|
const pdf = await pdfjsLib.getDocument(props.pdfObj.pdfUrl).promise
|
||||||
numPagesTotal.value = pdf.numPages
|
numPagesTotal.value = pdf.numPages
|
||||||
|
|
||||||
// 初始化fabriccanvas
|
// 初始化fabriccanvas
|
||||||
const option = { freeDrawingCursor: 'default' }
|
const option = { freeDrawingCursor: 'default' }
|
||||||
const canvas1 = new fabricVue()
|
const canvas1 = new fabricVue()
|
||||||
|
@ -246,17 +284,15 @@ onMounted(async () => {
|
||||||
// canvas1.boardConfig.mode= TYPES.ActionMode.ERASE
|
// canvas1.boardConfig.mode= TYPES.ActionMode.ERASE
|
||||||
await canvas1.initCanvas(fabriccanvas.value, option)
|
await canvas1.initCanvas(fabriccanvas.value, option)
|
||||||
canvas1.canvas.setWidth(window.innerWidth / 2 - 100)
|
canvas1.canvas.setWidth(window.innerWidth / 2 - 100)
|
||||||
// canvas1.canvas.isDrawingMode=false
|
|
||||||
canvasFabricVue.value = canvas1
|
canvasFabricVue.value = canvas1
|
||||||
const canvas2 = new fabricVue()
|
const canvas2 = new fabricVue()
|
||||||
canvas2.boardConfig.mode = TYPES.ActionMode.DRAW
|
|
||||||
await canvas2.initCanvas(fabriccanvas1.value, option)
|
await canvas2.initCanvas(fabriccanvas1.value, option)
|
||||||
canvas2.canvas.setWidth(window.innerWidth / 2 - 100)
|
canvas2.canvas.setWidth(window.innerWidth / 2 - 100)
|
||||||
// canvas2.canvas.isDrawingMode=false
|
// canvas2.canvas.isDrawingMode=false
|
||||||
canvas1FabricVue.value = canvas2
|
canvas1FabricVue.value = canvas2
|
||||||
window.test = { canvas1, canvas2 }
|
window.test = { canvas1, canvas2 }
|
||||||
emit('update:numPagesTotal', pdf.numPages)
|
emit('update:numPagesTotal', pdf.numPages)
|
||||||
|
//加载接口数据
|
||||||
if (props.pdfObj.allPageData.length) {
|
if (props.pdfObj.allPageData.length) {
|
||||||
props.pdfObj.allPageData.forEach((a) => {
|
props.pdfObj.allPageData.forEach((a) => {
|
||||||
if (a.pageNum == 1 || a.pageNum == 2) {
|
if (a.pageNum == 1 || a.pageNum == 2) {
|
||||||
|
@ -273,36 +309,79 @@ onMounted(async () => {
|
||||||
// handleevent(fabriccanvas.value, imgarr)
|
// handleevent(fabriccanvas.value, imgarr)
|
||||||
// handleevent(fabriccanvas1.value, imgarr, 'two')
|
// handleevent(fabriccanvas1.value, imgarr, 'two')
|
||||||
})
|
})
|
||||||
|
// 判断元素是否加载完成
|
||||||
|
const handleMode = (vale,type)=>{
|
||||||
|
if(vale=='select'){
|
||||||
|
ispointer.value=true
|
||||||
|
}else{
|
||||||
|
ispointer.value=false
|
||||||
|
}
|
||||||
|
switch(vale) {
|
||||||
|
case 'select': // 选择模式
|
||||||
|
canvasFabricVue.value?.handleMode(TYPES.ActionMode.OTHER)
|
||||||
|
canvas1FabricVue.value?.handleMode(TYPES.ActionMode.OTHER)
|
||||||
|
break
|
||||||
|
case 'brush': // 画笔模式
|
||||||
|
canvasFabricVue.value?.handleMode(TYPES.ActionMode.DRAW)
|
||||||
|
canvasFabricVue.value.canvas.freeDrawingCursor = 'default'
|
||||||
|
canvas1FabricVue.value?.handleMode(TYPES.ActionMode.DRAW)
|
||||||
|
canvas1FabricVue.value.canvas.freeDrawingCursor = 'default'
|
||||||
|
break
|
||||||
|
case 'eraser': // 板擦模式
|
||||||
|
canvasFabricVue.value?.handleMode(TYPES.ActionMode.ERASE)
|
||||||
|
canvas1FabricVue.value?.handleMode(TYPES.ActionMode.ERASE)
|
||||||
|
break
|
||||||
|
case 'clear': // 清空画布
|
||||||
|
clearCanvas()
|
||||||
|
// canvas1FabricVue.value.history?.clean()
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 清空canvas
|
||||||
|
const clearCanvas=()=>{
|
||||||
|
if(canvasFabricVue.value){
|
||||||
|
const objects = canvasFabricVue.value.canvas.getObjects();
|
||||||
|
objects.forEach((obj) => {
|
||||||
|
// 检查对象是否是背景
|
||||||
|
if (obj !== canvasFabricVue.value.canvas.backgroundImage) {
|
||||||
|
// 删除背景之外的对象
|
||||||
|
canvasFabricVue.value.canvas.remove(obj);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
canvasFabricVue.value.canvas.renderAll();
|
||||||
|
}
|
||||||
|
if(canvas1FabricVue.value){
|
||||||
|
const objects = canvas1FabricVue.value.canvas.getObjects();
|
||||||
|
objects.forEach((obj) => {
|
||||||
|
// 检查对象是否是背景
|
||||||
|
if (obj !== canvas1FabricVue.value.canvas.backgroundImage) {
|
||||||
|
// 删除背景之外的对象
|
||||||
|
canvas1FabricVue.value.canvas.remove(obj);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
defineExpose({
|
canvas1FabricVue.value.canvas.renderAll();
|
||||||
initPdf,
|
}
|
||||||
initPdfone
|
}
|
||||||
})
|
const watchToolState=()=>{
|
||||||
watchEffect(() => {
|
if(toolState.showBoardAll){
|
||||||
|
|
||||||
console.log(toolState.showBoardAll,'监听')
|
|
||||||
if( toolState.showBoardAll){
|
|
||||||
console.log('xczxcxzsdf')
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
toolState.showBoardAll=false
|
toolState.showBoardAll=false
|
||||||
}, 200);
|
}, 200);
|
||||||
}
|
}
|
||||||
// if(toolState.model=='select'){
|
// 加载工具
|
||||||
// toolState.showBoardAll=false
|
handleMode(toolState.model)
|
||||||
// }
|
|
||||||
// if(toolState.model!='select'){
|
|
||||||
// toolState.showBoardAll=false
|
|
||||||
// }
|
|
||||||
// console.log(toolState.model,toolState.showBoardAll)
|
|
||||||
|
|
||||||
// if(toolState.model!='select'){
|
|
||||||
// toolState.showBoardAll=false
|
|
||||||
|
|
||||||
// console.log(toolState.model)
|
|
||||||
// console.log( toolState.showBoardAll)
|
|
||||||
// }
|
|
||||||
|
|
||||||
|
}
|
||||||
|
defineExpose({
|
||||||
|
initPdf,
|
||||||
|
initPdfone,
|
||||||
|
savaDataStore
|
||||||
|
})
|
||||||
|
watchEffect(() => {
|
||||||
|
console.log(toolState.model,'监听')
|
||||||
|
watchToolState() //监听工具栏
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -312,6 +391,8 @@ watchEffect(() => {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
overflow: hidden;
|
||||||
|
max-height: 100vh;
|
||||||
}
|
}
|
||||||
.pdfAdnFabric {
|
.pdfAdnFabric {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
|
@ -94,6 +94,7 @@ export const createWindow = async (type, data) => {
|
||||||
win.type = type // 唯一标识
|
win.type = type // 唯一标识
|
||||||
win.show()
|
win.show()
|
||||||
win.setFullScreen(true) // 设置窗口为全屏
|
win.setFullScreen(true) // 设置窗口为全屏
|
||||||
|
// win.webContents.openDevTools() // 打开调试工具
|
||||||
eventHandles(type, win) // 事件监听处理
|
eventHandles(type, win) // 事件监听处理
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="pdfbox" ref="pdfbox">
|
<div class="pdfbox" ref="pdfbox">
|
||||||
<pdfCanvas :pdfObj="pdfObj" ref="pdfCanvaslist" @update:numPagesTotal="handleUpdate" />
|
<pdfCanvas v-if="isOnLoadShow" :pdfObj="pdfObj" ref="pdfCanvaslist" @update:numPagesTotal="handleUpdate" />
|
||||||
<div class="pdf-btn">
|
<div class="pdf-btn">
|
||||||
<el-button
|
<el-button
|
||||||
style="border-top-left-radius: 8px"
|
style="border-top-left-radius: 8px"
|
||||||
|
@ -45,6 +45,8 @@ import {useToolState} from '@/store/modules/tool'
|
||||||
// }
|
// }
|
||||||
pdfjsLib.GlobalWorkerOptions.workerSrc = getStaticUrl('/lib/build/pdf.worker.mjs')
|
pdfjsLib.GlobalWorkerOptions.workerSrc = getStaticUrl('/lib/build/pdf.worker.mjs')
|
||||||
const toolState = useToolState();
|
const toolState = useToolState();
|
||||||
|
const route = useRoute();
|
||||||
|
const isOnLoadShow = ref(false) //加载完毕显示
|
||||||
// 传过去的参数
|
// 传过去的参数
|
||||||
const pdfObj = reactive({
|
const pdfObj = reactive({
|
||||||
numberOfPdf: 2, //显示几页
|
numberOfPdf: 2, //显示几页
|
||||||
|
@ -53,7 +55,7 @@ const pdfObj = reactive({
|
||||||
bookId:null,
|
bookId:null,
|
||||||
numPages: 1 //当前页数
|
numPages: 1 //当前页数
|
||||||
})
|
})
|
||||||
const textbookId=ref(null)
|
const textbookId=ref(null) //书籍id
|
||||||
// 总条数
|
// 总条数
|
||||||
const numPagesTotal = ref(0)
|
const numPagesTotal = ref(0)
|
||||||
const pdfCanvaslist = ref(null)
|
const pdfCanvaslist = ref(null)
|
||||||
|
@ -71,13 +73,13 @@ const navtopage = (type) => {
|
||||||
pdfCanvaslist.value.initPdf('rest')
|
pdfCanvaslist.value.initPdf('rest')
|
||||||
}
|
}
|
||||||
// 最小化窗口
|
// 最小化窗口
|
||||||
const minimize = () => {
|
const minimize = async () => {
|
||||||
|
await pdfCanvaslist.value.savaDataStore()
|
||||||
toolState.isPdfWin=false
|
// toolState.isPdfWin=false
|
||||||
toolState.showBoardAll=true //恢复默认值
|
// toolState.showBoardAll=true //恢复默认值
|
||||||
console.log(toolState.showBoardAll,"关闭")
|
// console.log(toolState.showBoardAll,"关闭")
|
||||||
// ipcRenderer.send('tool-sphere:reset') //重置tool状态
|
// // ipcRenderer.send('tool-sphere:reset') //重置tool状态
|
||||||
ipcRenderer.send('open-PDF:minimize')
|
// ipcRenderer.send('open-PDF:minimize')
|
||||||
}
|
}
|
||||||
const handleUpdate = (data) => {
|
const handleUpdate = (data) => {
|
||||||
numPagesTotal.value = data
|
numPagesTotal.value = data
|
||||||
|
@ -106,12 +108,11 @@ const switchPageMode = () => {
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
toolState.isPdfWin=true
|
toolState.isPdfWin=true
|
||||||
console.log(toolState.showBoardAll,"c初始")
|
console.log(toolState.showBoardAll,"c初始")
|
||||||
const route = useRoute();
|
|
||||||
textbookId.value = route.query.textbookId
|
textbookId.value = route.query.textbookId
|
||||||
pdfObj.bookId=textbookId.value
|
pdfObj.bookId=textbookId.value
|
||||||
getBookMarkById(textbookId.value).then(res=>{
|
getBookMarkById(textbookId.value).then(res=>{
|
||||||
pdfObj.allPageData=getUniqueArrayByLastOccurrence(res.data)
|
pdfObj.allPageData=getUniqueArrayByLastOccurrence(res.data)
|
||||||
console.log(pdfObj.allPageData)
|
isOnLoadShow.value=true
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -130,13 +131,6 @@ const getUniqueArrayByLastOccurrence=(array)=> {
|
||||||
|
|
||||||
return resultArray;
|
return resultArray;
|
||||||
}
|
}
|
||||||
// watchEffect(() => {
|
|
||||||
// if(toolState.model=='select'){
|
|
||||||
// toolState.showBoardAll=false
|
|
||||||
|
|
||||||
// }
|
|
||||||
// console.log(toolState.model)
|
|
||||||
// })
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
|
@ -102,7 +102,6 @@ watchEffect(() => { // 监听
|
||||||
isShow.value = !toolStore.isPdfWin&&toolStore.showBoardAll // 是否显示-画板
|
isShow.value = !toolStore.isPdfWin&&toolStore.showBoardAll // 是否显示-画板
|
||||||
if(!toolStore.isPdfWin && toolStore.showBoardAll){ //恢复进入页面前的状态
|
if(!toolStore.isPdfWin && toolStore.showBoardAll){ //恢复进入页面前的状态
|
||||||
// setTimeout(() => {
|
// setTimeout(() => {
|
||||||
console.log('2222222222222222222')
|
|
||||||
boardVueRef.value.handleMode(tabActive.value)
|
boardVueRef.value.handleMode(tabActive.value)
|
||||||
setIgnore(false)
|
setIgnore(false)
|
||||||
// },0)
|
// },0)
|
||||||
|
|
Loading…
Reference in New Issue