From 4e2ac7c92e57f9e34596d9e01453834debd0a6b2 Mon Sep 17 00:00:00 2001
From: zhangxuelin <959231531@qq.com>
Date: Fri, 26 Jul 2024 10:26:34 +0800
Subject: [PATCH] =?UTF-8?q?pdf=E7=9A=84=E5=B1=95=E7=A4=BA=20=E7=BF=BB?=
 =?UTF-8?q?=E9=A1=B5=20=E5=8F=8A=E6=95=B0=E6=8D=AE=E5=9B=9E=E6=98=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/src/components/pdf/index.vue     | 266 +++++++++++++-----
 .../src/plugins/fabric/event/clickEvent.js    |   6 +
 src/renderer/src/utils/pdfAndFabric.js        | 129 +++++++++
 src/renderer/src/views/classBegins/index.vue  | 173 ++++++------
 4 files changed, 418 insertions(+), 156 deletions(-)
 create mode 100644 src/renderer/src/utils/pdfAndFabric.js

diff --git a/src/renderer/src/components/pdf/index.vue b/src/renderer/src/components/pdf/index.vue
index ce95200..15c1821 100644
--- a/src/renderer/src/components/pdf/index.vue
+++ b/src/renderer/src/components/pdf/index.vue
@@ -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>
\ No newline at end of file
diff --git a/src/renderer/src/plugins/fabric/event/clickEvent.js b/src/renderer/src/plugins/fabric/event/clickEvent.js
index 98c5816..1bc085f 100644
--- a/src/renderer/src/plugins/fabric/event/clickEvent.js
+++ b/src/renderer/src/plugins/fabric/event/clickEvent.js
@@ -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])
diff --git a/src/renderer/src/utils/pdfAndFabric.js b/src/renderer/src/utils/pdfAndFabric.js
new file mode 100644
index 0000000..f4b0ca9
--- /dev/null
+++ b/src/renderer/src/utils/pdfAndFabric.js
@@ -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)
+  })
+}
diff --git a/src/renderer/src/views/classBegins/index.vue b/src/renderer/src/views/classBegins/index.vue
index d80c99a..26e226d 100644
--- a/src/renderer/src/views/classBegins/index.vue
+++ b/src/renderer/src/views/classBegins/index.vue
@@ -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;
+      }
     }
   }
 }