下载海报修改

package.json

@@ -19,6 +19,7 @@
     "highcharts": "^9.3.2",
     "himalaya": "^1.1.0",
     "html-to-image": "^1.11.11",
+    "html2canvas": "^1.4.1",
     "js-base64": "^3.7.5",
     "js-md5": "^0.7.3",
     "lodash": "^4.17.21",

src/views/report/chapter/List.vue

@@ -1,5 +1,5 @@
 <script setup name="reportChapterList">
-import {reactive, ref} from 'vue'
+import {nextTick, reactive, ref} from 'vue'
 import { useRoute, useRouter } from "vue-router";
 import apiReport from '@/api/report'
 import {apiGetWXQRCodeImg} from '@/api/common'
@@ -8,6 +8,7 @@ import { showToast,showDialog } from 'vant';
 import { useWindowSize } from '@vueuse/core'
 import {useCachedViewsStore} from '@/store/modules/cachedViews'
 import EditBaseInfo from './components/EidtBaseInfo.vue'
+import html2canvas from "html2canvas";
 
 const cachedViewsStore=useCachedViewsStore()
 const { width, height } = useWindowSize()
@@ -205,6 +206,7 @@ async function handlePublishReport(){
 // 显示海报
 const showChapterItemPoster=ref(false)
 const chapterItemPosterInfo=ref(null)
+const posterImgBase64=ref('')
 async function handleShowPoster(item){
     if(!item.QRCodeImg){//获取二维码
         const res=await apiGetWXQRCodeImg({
@@ -216,7 +218,23 @@ async function handleShowPoster(item){
         }
     }
     chapterItemPosterInfo.value=item
-    showChapterItemPoster.value=true
+
+    nextTick(()=>{
+        const targetEl = document.getElementById('chapter-poster-box');
+        if(targetEl){
+            html2canvas(targetEl,{
+                backgroundColor: "#ffffff",
+                useCORS: true, // 允许图片跨域
+                allowTaint: true, // 在渲染前测试图片
+                imageTimeout: 0, // 加载延时
+                scale:3,
+            }).then(res=>{
+                let img = res.toDataURL("image/png");
+                posterImgBase64.value=img
+                showChapterItemPoster.value=true
+            })
+        }
+    })
 }
 
 </script>
@@ -291,13 +309,16 @@ async function handleShowPoster(item){
         v-model:show="showChapterItemPoster" 
         round
     >
-        <div class="select-text-disabled chapter-poster-box" v-screenshot="{target: '.chapter-poster-box', filename: 'my-screenshot.png'}">
+        <img class="chapter-poster-img" :src="posterImgBase64" alt="">
+    </van-popup>
+
+    <!-- 海报dom模块 -->
+        <div v-if="chapterItemPosterInfo" class="select-text-disabled chapter-poster-box" id="chapter-poster-box">
             <img class="bg" :src="chapterItemPosterInfo.TypeEditImg" alt="">
             <h2 class="title">【第{{reportInfo.Stage}}期|{{reportInfo.ClassifyNameFirst}}|{{chapterItemPosterInfo.TypeName}}】{{chapterItemPosterInfo.Title}}</h2>
             <img class="code-img" :src="chapterItemPosterInfo.QRCodeImg" alt="">
             <p class="tips">长按保存图片，发送给好友</p>
         </div>
-    </van-popup>
 </template>
 
 <style lang="scss" scoped>
@@ -414,7 +435,15 @@ async function handleShowPoster(item){
     }
 }
 
+.chapter-poster-img{
+    display: block;
+    width: 300PX;
+    border-radius: 6PX;
+    padding: 10PX;
+}
 .chapter-poster-box{
+    position: fixed;
+    z-index: -100;
     width: 300PX;
     border-radius: 6PX;
     padding: 10PX;