zdg #72
|
|
@ -1,97 +1,213 @@
|
|||
<template>
|
||||
<div class="canvasitem">
|
||||
<canvas v-for="(item,index) in pdfObj.numberOfPdf" :key="index" :id="'pdf-canvas'+(index+1)" :ref="'canvasPdf'+(index+1)" class="pdf-canvas" style="height:100vh;padding-right:10px"></canvas>
|
||||
<div class="canvasitem">
|
||||
<div class="pdfAdnFabric">
|
||||
<canvas id="pdf-fabric"></canvas>
|
||||
<canvas id="pdf-fabric1" v-if="props.pdfObj.numberOfPdf == 2"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup >
|
||||
import { ref, onMounted, watch, reactive,defineProps ,defineExpose,nextTick,defineEmits } from 'vue';
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
watch,
|
||||
reactive,
|
||||
defineProps,
|
||||
defineExpose,
|
||||
nextTick,
|
||||
defineEmits
|
||||
} from 'vue'
|
||||
import { fabric } from 'fabric'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { handleevent, savecanvsStore, initcanvasdata, displayData } from '@/utils/pdfAndFabric'
|
||||
|
||||
const props = defineProps({
|
||||
pdfObj: {
|
||||
type: Object,
|
||||
default: {
|
||||
numberOfPdf:2, //pdf数量 只有 1 2
|
||||
pdfUrl:null,
|
||||
numPages:1
|
||||
}
|
||||
pdfObj: {
|
||||
type: Object,
|
||||
default: {
|
||||
numberOfPdf: 2, //pdf数量 只有 1 2
|
||||
pdfUrl: null,
|
||||
numPages: 1
|
||||
}
|
||||
}
|
||||
})
|
||||
const numPages=ref(0)
|
||||
// canvas的所有数据
|
||||
const canvsStore = reactive({
|
||||
id: 'xxxx',
|
||||
pageArr: []
|
||||
})
|
||||
const fabriccanvas = ref(null)
|
||||
const fabriccanvas1 = ref(null)
|
||||
// 页面总数
|
||||
const numPagesTotal = ref(0)
|
||||
const imgarr = ref([])
|
||||
// 多个pdf的对象
|
||||
const canvasNumbsValue = ref([]);
|
||||
const emit = defineEmits(['update:numPages'])
|
||||
const canvasNumbsValue = ref([])
|
||||
const emit = defineEmits(['update:numPagesTotal'])
|
||||
const renderPage = async (canvasobj) => {
|
||||
if(canvasobj.page>numPages.value) return
|
||||
const pdf = await pdfjsLib.getDocument(props.pdfObj.pdfUrl).promise;
|
||||
if (canvasobj.page > numPagesTotal.value) return
|
||||
const pdf = await pdfjsLib.getDocument(props.pdfObj.pdfUrl).promise
|
||||
// 渲染当前页
|
||||
const page1 = await pdf.getPage(canvasobj.page);
|
||||
const viewport1 = page1.getViewport({ scale: 1 });
|
||||
const canvasElement1 = canvasobj.canvas;
|
||||
canvasElement1.width = viewport1.width;
|
||||
canvasElement1.height = viewport1.height;
|
||||
const page = await pdf.getPage(canvasobj.page)
|
||||
const viewport = page.getViewport({ scale: 1 })
|
||||
|
||||
const renderContext1 = {
|
||||
canvasContext:canvasobj.context,
|
||||
viewport: viewport1,
|
||||
};
|
||||
await page1.render(renderContext1).promise;
|
||||
|
||||
};
|
||||
const updatePage = (canvasobj) => {
|
||||
renderPage(canvasobj);
|
||||
};
|
||||
const loadPdf = async (canvasobj) => {
|
||||
|
||||
updatePage(canvasobj);
|
||||
|
||||
};
|
||||
const initPdf = async() => {
|
||||
// 清除现有 canvas 元素的内容
|
||||
canvasNumbsValue.value.forEach((canvasObj) => {
|
||||
const context = canvasObj.context;
|
||||
context.clearRect(0, 0, canvasObj.canvas.width, canvasObj.canvas.height);
|
||||
});
|
||||
canvasNumbsValue.value=[]
|
||||
if(props.pdfObj.pdfUrl){
|
||||
await nextTick(); // 确保 DOM 渲染完成
|
||||
if(props.pdfObj.numberOfPdf==1){
|
||||
canvasNumbsValue.value=[{}]
|
||||
canvasNumbsValue.value[0].canvas = document.getElementById('pdf-canvas1');
|
||||
canvasNumbsValue.value[0].context = canvasNumbsValue.value[0].canvas.getContext('2d');
|
||||
canvasNumbsValue.value[0].page =Number(props.pdfObj.numPages)*props.pdfObj.numberOfPdf
|
||||
await loadPdf(canvasNumbsValue.value[0]);
|
||||
}else{
|
||||
for(var i=0;i<props.pdfObj.numberOfPdf;i++){
|
||||
canvasNumbsValue.value[i] = {};
|
||||
canvasNumbsValue.value[i].canvas = document.getElementById('pdf-canvas'+(i+1));
|
||||
canvasNumbsValue.value[i].context = canvasNumbsValue.value[i].canvas.getContext('2d');
|
||||
if(i==0){
|
||||
canvasNumbsValue.value[i].page =Number(props.pdfObj.numPages)*props.pdfObj.numberOfPdf-1
|
||||
}else{
|
||||
canvasNumbsValue.value[i].page =Number(props.pdfObj.numPages)*props.pdfObj.numberOfPdf
|
||||
}
|
||||
await loadPdf(canvasNumbsValue.value[i]);
|
||||
const canvasElement = canvasobj.canvas
|
||||
canvasElement.width = viewport.width
|
||||
canvasElement.height = viewport.height
|
||||
const renderContext = {
|
||||
canvasContext: canvasobj.context,
|
||||
viewport: viewport
|
||||
}
|
||||
page.render(renderContext).promise.then((res) => {
|
||||
const img = document.createElement('img')
|
||||
img.src = canvasobj.canvas.toDataURL('image/png')
|
||||
canvasobj.canvas.remove()
|
||||
imgarr.value.push({ src: img.src, page: canvasobj.page, JSONdata: {}, index: canvasobj.index })
|
||||
img.onload = () => {
|
||||
// 在这里执行图像加载完成后的操作
|
||||
// 根据传过来的pdf对象 判断改渲染哪一个fabric
|
||||
if (props.pdfObj.numberOfPdf == 2) {
|
||||
if (canvasobj.index == 0) {
|
||||
fabriccanvas.value.setWidth(img.width)
|
||||
fabriccanvas.value.setHeight(img.height)
|
||||
displayData(fabriccanvas, canvsStore, canvasobj, fabric, img)
|
||||
} else {
|
||||
fabriccanvas1.value.setWidth(img.width)
|
||||
fabriccanvas1.value.setHeight(img.height)
|
||||
displayData(fabriccanvas1, canvsStore, canvasobj, fabric, img)
|
||||
}
|
||||
}
|
||||
|
||||
} else {
|
||||
fabriccanvas.value.setWidth(img.width)
|
||||
fabriccanvas.value.setHeight(img.height)
|
||||
displayData(fabriccanvas, canvsStore, canvasobj, fabric, img)
|
||||
}
|
||||
// console.log(imgarr.value)
|
||||
img.remove()
|
||||
}
|
||||
// 判断imgarr的JSONdata在canvsStore.pageArr有没有
|
||||
canvsStore.pageArr.forEach((item) => {
|
||||
if (item.page == canvasobj.page) {
|
||||
imgarr.value.forEach((img) => {
|
||||
if (img.page == canvasobj.page) {
|
||||
img.JSONdata = item.JSONdata
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
onMounted( async() => {
|
||||
const pdf = await pdfjsLib.getDocument(props.pdfObj.pdfUrl).promise;
|
||||
numPages.value = pdf.numPages;
|
||||
emit('update:numPages', pdf.numPages);
|
||||
const updatePage = (canvasobj) => {
|
||||
renderPage(canvasobj)
|
||||
}
|
||||
const loadPdf = async (canvasobj) => {
|
||||
updatePage(canvasobj)
|
||||
}
|
||||
|
||||
const initPdf = async (type = 'default') => {
|
||||
// 保存数据
|
||||
savecanvsStore(imgarr, canvsStore)
|
||||
// initcanvasdata(fabriccanvas)
|
||||
// initcanvasdata(fabriccanvas1)
|
||||
// 单页模式
|
||||
if (type == 'restone') {
|
||||
// 清除 canvas 上的所有对象
|
||||
fabriccanvas1.value.clear()
|
||||
// 释放 canvas 的资源
|
||||
fabriccanvas1.value.dispose()
|
||||
}
|
||||
// 清除现有 canvas 元素的内容
|
||||
canvasNumbsValue.value.forEach((canvasObj) => {
|
||||
const context = canvasObj.context
|
||||
context.clearRect(0, 0, canvasObj.canvas.width, canvasObj.canvas.height)
|
||||
})
|
||||
// 清除所有对象
|
||||
imgarr.value = []
|
||||
canvasNumbsValue.value = []
|
||||
if (props.pdfObj.pdfUrl) {
|
||||
await nextTick() // 确保 DOM 渲染完成
|
||||
if (props.pdfObj.numberOfPdf == 1) {
|
||||
canvasNumbsValue.value = [{}]
|
||||
const canvasElement = document.createElement('canvas')
|
||||
canvasNumbsValue.value[0].canvas = canvasElement
|
||||
canvasNumbsValue.value[0].context = canvasNumbsValue.value[0].canvas.getContext('2d')
|
||||
canvasNumbsValue.value[0].page = props.pdfObj.numPages
|
||||
canvasNumbsValue.value[0].index = 0
|
||||
await loadPdf(canvasNumbsValue.value[0])
|
||||
} else {
|
||||
for (var i = 0; i < props.pdfObj.numberOfPdf; i++) {
|
||||
canvasNumbsValue.value[i] = {}
|
||||
const canvasElement = document.createElement('canvas')
|
||||
canvasNumbsValue.value[i].canvas = canvasElement
|
||||
canvasNumbsValue.value[i].context = canvasNumbsValue.value[i].canvas.getContext('2d')
|
||||
// 设置页数
|
||||
if (i == 0) {
|
||||
canvasNumbsValue.value[i].page = props.pdfObj.numPages
|
||||
} else {
|
||||
canvasNumbsValue.value[i].page = props.pdfObj.numPages + 1
|
||||
}
|
||||
|
||||
canvasNumbsValue.value[i].index = i
|
||||
// 加载FabricVue
|
||||
await loadPdf(canvasNumbsValue.value[i])
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
const initPdfone = async () => {
|
||||
setTimeout(() => {
|
||||
fabriccanvas1.value = new fabric.Canvas('pdf-fabric1')
|
||||
fabriccanvas1.value.isDrawingMode = true
|
||||
fabriccanvas1.value.freeDrawingBrush.color = 'red'
|
||||
fabriccanvas1.value.setWidth(595)
|
||||
}, 0)
|
||||
initPdf('addOnePage')
|
||||
}
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const pdf = await pdfjsLib.getDocument(props.pdfObj.pdfUrl).promise
|
||||
numPagesTotal.value = pdf.numPages
|
||||
// console.log(pdf)
|
||||
// 初始化fabriccanvas
|
||||
fabriccanvas.value = new fabric.Canvas('pdf-fabric')
|
||||
fabriccanvas.value.setWidth(595)
|
||||
fabriccanvas.value.isDrawingMode = true
|
||||
fabriccanvas.value.freeDrawingBrush.color = 'red'
|
||||
|
||||
fabriccanvas1.value = new fabric.Canvas('pdf-fabric1')
|
||||
fabriccanvas1.value.isDrawingMode = true
|
||||
fabriccanvas1.value.freeDrawingBrush.color = 'red'
|
||||
fabriccanvas1.value.setWidth(595)
|
||||
emit('update:numPagesTotal', pdf.numPages)
|
||||
initPdf()
|
||||
});
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
ElMessage.error('pdf文件错误')
|
||||
}
|
||||
// 监听2个canvas事件
|
||||
handleevent(fabriccanvas.value, imgarr)
|
||||
handleevent(fabriccanvas1.value, imgarr, 'two')
|
||||
})
|
||||
defineExpose({
|
||||
initPdf
|
||||
});
|
||||
initPdf,
|
||||
initPdfone
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.canvasitem{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
justify-content: center
|
||||
.canvasitem {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
.pdfAdnFabric {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
align-items: center;
|
||||
:deep(> div:nth-of-type(1)) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -28,6 +28,8 @@ export class CanvasClickEvent {
|
|||
|
||||
// 事件：按下鼠标
|
||||
canvas?.on('mouse:down', (e) => {
|
||||
console.log(222222222222222222222222222)
|
||||
|
||||
this.isMouseDown = true
|
||||
if (this.isSpaceKeyDown) {
|
||||
return
|
||||
|
|
@ -148,6 +150,8 @@ export class CanvasClickEvent {
|
|||
|
||||
// 事件：移动鼠标
|
||||
canvas?.on('mouse:move', (e) => {
|
||||
console.log(222222222222222222222222222)
|
||||
|
||||
if (this.isMouseDown) {
|
||||
// Press space, drag the canvas, stop drawing.
|
||||
if (this.isSpaceKeyDown) {
|
||||
|
|
@ -180,6 +184,8 @@ export class CanvasClickEvent {
|
|||
|
||||
// 事件：松开鼠标
|
||||
canvas?.on('mouse:up', (e) => {
|
||||
console.log(222222222222222222222222222)
|
||||
|
||||
this.isMouseDown = false
|
||||
if (this.autoDrawInk?.[0]?.length > 3) {
|
||||
autoDrawData.addInk([...this.autoDrawInk])
|
||||
|
|
|
|||
|
|
@ -0,0 +1,129 @@
|
|||
// 所有事件
|
||||
export function handleevent(canvas, imgarr, type = 'defalut') {
|
||||
// 鼠标按下
|
||||
canvas.on('mouse:down', function (e) {})
|
||||
// // 监听鼠标移动事件
|
||||
// canvas.on('mouse:move', (options) => {
|
||||
// console.log('Mouse move event:', options);
|
||||
// });
|
||||
|
||||
// 监听鼠标释放事件
|
||||
canvas.on('mouse:up', (options) => {
|
||||
//判断是点击的哪一个
|
||||
if (type == 'defalut') {
|
||||
if (imgarr.value[0].index == 0) {
|
||||
imgarr.value[0].JSONdata = canvas.toJSON()
|
||||
}
|
||||
if (imgarr.value[1].index == 0) {
|
||||
imgarr.value[1].JSONdata = canvas.toJSON()
|
||||
}
|
||||
} else {
|
||||
if (imgarr.value[0].index == 1) {
|
||||
imgarr.value[0].JSONdata = canvas.toJSON()
|
||||
}
|
||||
if (imgarr.value[1].index == 1) {
|
||||
imgarr.value[1].JSONdata = canvas.toJSON()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
// 保存数据
|
||||
export function savecanvsStore(imgarr, canvsStore) {
|
||||
canvsStore.pageArr = mergeAndReplace(canvsStore.pageArr, imgarr.value)
|
||||
// console.log(canvsStore.pageArr,22222222222222222222+'存入')
|
||||
}
|
||||
// 重显数据
|
||||
export function displayData(canvas, canvsStore, canvasobj, fabric, img) {
|
||||
// 初始化
|
||||
if (!canvsStore.pageArr.length) {
|
||||
fabric.Image.fromURL(img.src, (img) => {
|
||||
img.set({
|
||||
left: 0,
|
||||
top: 0,
|
||||
scaleX: canvas.value.width / img.width,
|
||||
scaleY: canvas.value.height / img.height
|
||||
})
|
||||
canvas.value.setBackgroundImage(img, canvas.value.renderAll.bind(canvas.value))
|
||||
})
|
||||
return
|
||||
}
|
||||
canvsStore.pageArr.forEach((item) => {
|
||||
//初始化
|
||||
if (item.page == canvasobj.page) {
|
||||
canvas.value.clear() // 清除 Canvas
|
||||
// console.log(item.JSONdata, '找到一样的数据')
|
||||
canvas.value.loadFromJSON(item.JSONdata, () => {
|
||||
// 在所有对象加载完成后重新渲染画布
|
||||
requestAnimationFrame(() => {
|
||||
// 渲染所有对象
|
||||
canvas.value.renderAll.bind(canvas.value)
|
||||
canvas.value.renderAll()
|
||||
})
|
||||
})
|
||||
} else {
|
||||
// 使用 requestAnimationFrame 来更新画布，确保在下一帧进行重绘
|
||||
canvas.value.clear() // 清除 Canvas
|
||||
requestAnimationFrame(function () {
|
||||
fabric.Image.fromURL(img.src, (img) => {
|
||||
img.set({
|
||||
left: 0,
|
||||
top: 0,
|
||||
scaleX: canvas.value.width / img.width,
|
||||
scaleY: canvas.value.height / img.height
|
||||
})
|
||||
canvas.value.setBackgroundImage(img, canvas.value.renderAll.bind(canvas.value))
|
||||
})
|
||||
// 渲染所有对象
|
||||
canvas.value.renderAll.bind(canvas.value)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//page 一样替换
|
||||
const mergeAndReplace = (arr1, arr2) => {
|
||||
// // 用于存储替换后的数组
|
||||
// const resultArray = array1.map(item1 => {
|
||||
// // 在 array2 中查找 page 相同的对象
|
||||
// const replacement = array2.find(item2 => item2.page == item1.page);
|
||||
// // 如果找到替换对象，则返回替换对象，否则返回原对象
|
||||
// return replacement ? replacement : item1;
|
||||
// });
|
||||
|
||||
// // 将 array2 中 page 不在 array1 中的对象追加到结果数组中
|
||||
// array2.forEach(item2 => {
|
||||
// const existsInArray1 = array1.some(item1 => item1.page == item2.page);
|
||||
// if (!existsInArray1) {
|
||||
// resultArray.push(item2);
|
||||
// }
|
||||
// });
|
||||
|
||||
// return resultArray;
|
||||
|
||||
// 创建一个映射，将 arr2 中的对象按 page 属性存储
|
||||
let map = new Map(arr2.map((item) => [item.page, item]))
|
||||
|
||||
// 使用 map 替换 arr1 中相应 page 的对象，并添加 arr2 中的对象
|
||||
arr1 = arr1.map((item) => (map.has(item.page) ? map.get(item.page) : item))
|
||||
|
||||
// 将 map 中存在但 arr1 中不存在的对象添加到 arr1
|
||||
for (let [page, obj] of map) {
|
||||
if (!arr1.some((item) => item.page === page)) {
|
||||
arr1.push(obj)
|
||||
}
|
||||
}
|
||||
return arr1
|
||||
}
|
||||
|
||||
// 初始化数据
|
||||
export function initcanvasdata(canvas) {
|
||||
canvas.value.clear() // 清除 Canvas
|
||||
// 设置画布的背景色或其他属性
|
||||
canvas.value.backgroundColor = 'rgba(255, 255, 255, 1)' // 白色背景
|
||||
|
||||
// 使用 requestAnimationFrame 来更新画布，确保在下一帧进行重绘
|
||||
requestAnimationFrame(function () {
|
||||
// 渲染所有对象
|
||||
canvas.value.renderAll.bind(canvas.value)
|
||||
})
|
||||
}
|
||||
|
|
@ -1,78 +1,89 @@
|
|||
<template>
|
||||
<div class="pdfbox" ref="pdfbox">
|
||||
<pdfCanvas :pdfObj="pdfObj" ref="pdfCanvaslist" @update:numPages="handleUpdate" />
|
||||
<div class="pdf-btn">
|
||||
<el-button style=" border-top-left-radius: 8px;" @click="switchPageMode">
|
||||
<i class="iconfont icon-danyemoban" v-if="pdfObj.numberOfPdf==2"></i>
|
||||
<i class="iconfont icon-shuangye" v-if="pdfObj.numberOfPdf==1"></i>
|
||||
<span class="texts">{{ pdfObj.numberOfPdf==1?'双页':'单页' }}</span>
|
||||
</el-button>
|
||||
<el-button @click="navtopage('up')" :disabled="pdfObj.numPages==1">
|
||||
<i class="iconfont icon-shangyiye"></i>
|
||||
<span class="texts">上一页</span>
|
||||
</el-button>
|
||||
<el-button @click="navtopage('lower')" :disabled="pdfObj.numPages >= numPages/pdfObj.numberOfPdf" >
|
||||
<i class="iconfont icon-xiayiye"></i>
|
||||
<span class="texts">下一页</span>
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="pdfbox" ref="pdfbox">
|
||||
<pdfCanvas :pdfObj="pdfObj" ref="pdfCanvaslist" @update:numPagesTotal="handleUpdate" />
|
||||
<div class="pdf-btn">
|
||||
<el-button
|
||||
style="border-top-left-radius: 8px"
|
||||
@click="switchPageMode"
|
||||
:disabled="numPagesTotal == 1"
|
||||
>
|
||||
<i class="iconfont icon-danyemoban" v-if="pdfObj.numberOfPdf == 2"></i>
|
||||
<i class="iconfont icon-shuangye" v-if="pdfObj.numberOfPdf == 1"></i>
|
||||
<span class="texts">{{ pdfObj.numberOfPdf == 1 ? '双页' : '单页' }}</span>
|
||||
</el-button>
|
||||
<el-button @click="navtopage('up')" :disabled="pdfObj.numPages == 1 || numPagesTotal == 1">
|
||||
<i class="iconfont icon-shangyiye"></i>
|
||||
<span class="texts">上一页</span>
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="navtopage('lower')"
|
||||
:disabled="
|
||||
pdfObj.numberOfPdf == 1
|
||||
? pdfObj.numPages >= numPagesTotal
|
||||
: pdfObj.numPages >= numPagesTotal - 1 || numPagesTotal == 1
|
||||
"
|
||||
>
|
||||
<i class="iconfont icon-xiayiye"></i>
|
||||
<span class="texts">下一页</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, watch, reactive } from 'vue';
|
||||
import * as pdfjsLib from 'pdfjs-dist/legacy/build/pdf';
|
||||
pdfjsLib.GlobalWorkerOptions.workerSrc = '/lib/build/pdf.worker.mjs';
|
||||
import pdfCanvas from '@/components/pdf/index.vue';
|
||||
import { ref, onMounted, watch, reactive } from 'vue'
|
||||
import * as pdfjsLib from 'pdfjs-dist/legacy/build/pdf'
|
||||
pdfjsLib.GlobalWorkerOptions.workerSrc = '/lib/build/pdf.worker.mjs'
|
||||
import pdfCanvas from '@/components/pdf/index.vue'
|
||||
|
||||
// 传过去的参数
|
||||
const pdfObj = reactive({
|
||||
numberOfPdf:2, //显示几页
|
||||
pdfUrl:'/aaa.pdf', //url
|
||||
numPages:1//当前页数
|
||||
});
|
||||
const numPages=ref(0)
|
||||
|
||||
const pdfCanvaslist=ref(null);
|
||||
const navtopage=(type)=>{
|
||||
const maxpage=numPages.value/pdfObj.numberOfPdf
|
||||
if(type=='up'){
|
||||
pdfObj.numPages--;
|
||||
}else{
|
||||
pdfObj.numPages++;
|
||||
}
|
||||
if(pdfObj.numPages>maxpage) return
|
||||
pdfCanvaslist.value.initPdf()
|
||||
numberOfPdf: 2, //显示几页
|
||||
pdfUrl: '/aaa.pdf', //url
|
||||
numPages: 1 //当前页数
|
||||
})
|
||||
// 总条数
|
||||
const numPagesTotal = ref(0)
|
||||
const pdfCanvaslist = ref(null)
|
||||
const navtopage = (type) => {
|
||||
let num = 1
|
||||
if (pdfObj.numberOfPdf == 2) {
|
||||
num = 2
|
||||
}
|
||||
if (type == 'up') {
|
||||
pdfObj.numPages -= num
|
||||
} else {
|
||||
pdfObj.numPages += num
|
||||
}
|
||||
if (pdfObj.numPages > numPagesTotal.value) return
|
||||
pdfCanvaslist.value.initPdf()
|
||||
}
|
||||
|
||||
const handleUpdate=(data)=>{
|
||||
numPages.value=data
|
||||
}
|
||||
const divideWithRemainder=(num1, num2)=> {
|
||||
// 执行除法运算
|
||||
const quotient = Math.floor(num1 / num2);
|
||||
const remainder = num1 % num2;
|
||||
|
||||
// 如果有余数，则结果加 1
|
||||
return remainder === 0 ? quotient : quotient + 1;
|
||||
const handleUpdate = (data) => {
|
||||
numPagesTotal.value = data
|
||||
if (numPagesTotal.value == 1) {
|
||||
pdfObj.numberOfPdf = 1
|
||||
pdfCanvaslist.value.initPdf('restone')
|
||||
}
|
||||
}
|
||||
// 单双页切换
|
||||
const switchPageMode=()=>{
|
||||
// 单页切多页
|
||||
if(pdfObj.numberOfPdf==1){
|
||||
pdfObj.numberOfPdf=2;
|
||||
pdfObj.numPages= divideWithRemainder(pdfObj.numPages,pdfObj.numberOfPdf)
|
||||
}else{
|
||||
// 多页切单页
|
||||
pdfObj.numberOfPdf=1;
|
||||
pdfObj.numPages=pdfObj.numPages*2-1
|
||||
const switchPageMode = () => {
|
||||
// 单页切多页
|
||||
if (pdfObj.numberOfPdf == 1) {
|
||||
// 如果最后一页 切双页需要减1
|
||||
if (pdfObj.numPages == numPagesTotal.value) {
|
||||
pdfObj.numPages = pdfObj.numPages - 1
|
||||
}
|
||||
|
||||
pdfCanvaslist.value.initPdf()
|
||||
pdfObj.numberOfPdf = 2
|
||||
// 初始化第二个pdf canvas
|
||||
pdfCanvaslist.value.initPdfone()
|
||||
} else {
|
||||
// 多页切单页
|
||||
pdfObj.numberOfPdf = 1
|
||||
pdfCanvaslist.value.initPdf('restone')
|
||||
}
|
||||
}
|
||||
onMounted(async () => {
|
||||
|
||||
});
|
||||
|
||||
onMounted(async () => {})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -82,31 +93,31 @@ onMounted(async () => {
|
|||
justify-content: center;
|
||||
background: #f0f0f0;
|
||||
flex-wrap: wrap;
|
||||
.pdf-btn{
|
||||
.pdf-btn {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
|
||||
border-radius: 5px 0 0 0;
|
||||
.texts{
|
||||
display: block !important;
|
||||
margin-top: 10px;
|
||||
.texts {
|
||||
display: block !important;
|
||||
margin-top: 10px;
|
||||
}
|
||||
button{
|
||||
margin-left: 0;
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
// padding: 4px 7px;
|
||||
border-radius: 0;
|
||||
width: 80px;
|
||||
height: 70px;
|
||||
:deep(>span) {
|
||||
display: block !important;
|
||||
}
|
||||
.iconfont{
|
||||
font-size: 26px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
button {
|
||||
margin-left: 0;
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
// padding: 4px 7px;
|
||||
border-radius: 0;
|
||||
width: 80px;
|
||||
height: 70px;
|
||||
:deep(> span) {
|
||||
display: block !important;
|
||||
}
|
||||
.iconfont {
|
||||
font-size: 26px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue