update

src/views/components/element/FrameElement/BaseFrameElement.vue

@@ -32,6 +32,7 @@
           :frameborder="0" 
           :allowfullscreen="true"
           allow="camera *; microphone *; display-capture; midi; encrypted-media; fullscreen; geolocation; clipboard-read; clipboard-write; accelerometer; autoplay; gyroscope; payment; picture-in-picture; usb; xr-spatial-tracking;"
+          @load="handleIframeLoad"
         ></iframe>
         <!-- 占位符：当不可见时显示 -->
         <div v-else-if="!isThumbnail && !isVisible" class="iframe-placeholder">
@@ -58,7 +59,7 @@
 <script lang="ts" setup>
 import type { PropType } from 'vue'
 import type { PPTFrameElement } from '@/types/slides'
-import { ref, watch } from 'vue'
+import { ref, watch, nextTick } from 'vue'
 
 const props = defineProps({
   elementInfo: {
@@ -96,6 +97,67 @@ const getTypeLabel = (type: number) => {
   }
   return typeMap[type] || '未知'
 }
+
+// 处理iframe加载完成事件
+const handleIframeLoad = async (event: Event) => {
+  const iframe = event.target as HTMLIFrameElement
+  
+  try {
+    // 等待iframe完全加载
+    await nextTick()
+    
+    // 检查iframe是否可访问（同源检查）
+    if (iframe.contentWindow && iframe.contentDocument) {
+      const iframeDoc = iframe.contentDocument
+      const iframeHead = iframeDoc.head || iframeDoc.getElementsByTagName('head')[0]
+      
+      if (iframeHead) {
+        // 动态导入JS文件
+        const [awsJs, jqJs, jieTuJs] = await Promise.all([
+          import('./aws-sdk-2.235.1.min.js'),
+          import('./jquery-3.6.0.min.js'),
+          import('./jietu.js')
+        ])
+        
+        // 创建script标签并注入JS文件
+        const scripts = [
+          { id: 'aws-sdk', content: awsJs.default || awsJs },
+          { id: 'jquery', content: jqJs.default || jqJs },
+          { id: 'jietu', content: jieTuJs.default || jieTuJs }
+        ]
+        
+        scripts.forEach(script => {
+          // 检查是否已经注入过
+          if (!iframeDoc.getElementById(script.id)) {
+            const scriptElement = iframeDoc.createElement('script')
+            scriptElement.id = script.id
+            scriptElement.textContent = script.content
+            iframeHead.appendChild(scriptElement)
+            
+            console.log(`已注入 ${script.id} 到iframe中`)
+          }
+        })
+        
+        // 可选：在iframe中执行一些初始化代码
+        try {
+          iframe.contentWindow.eval(`
+            console.log('iframe中的JS环境已准备就绪');
+            // 这里可以添加一些初始化代码
+          `)
+        }
+        catch (evalError) {
+          console.warn('无法在iframe中执行代码:', evalError)
+        }
+      }
+    }
+    else {
+      console.warn('无法访问iframe内容，可能是跨域限制')
+    }
+  }
+  catch (error) {
+    console.error('注入JS到iframe失败:', error)
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -197,4 +259,4 @@ const getTypeLabel = (type: number) => {
     left: 100%;
   }
 }
-</style> 
+</style>

src/views/components/element/FrameElement/jietu.js

@@ -0,0 +1,110 @@
+function jietu_shishi(uid, cid, page, type) {
+  html2canvas($('body')[0]).then(function(canvas) {
+    // 获取截取图片路径
+
+    const base64Url = canvas.toDataURL('image/png')
+    // 后台操作处理
+
+    const base64 = '<img src=' + base64Url + ' />'
+    const file = dataURLtoFile_shishi(base64Url, '截图')
+    beforeUpload_shishi(file, uid, cid, page, type)
+    // $("body")[0].innerHTML = base64
+  })
+}
+
+function dataURLtoFile_shishi(dataurl, filename) {
+  let arr = dataurl.split(','),
+    mime = arr[0].match(/:(.*?);/)[1],
+    bstr = atob(arr[1]),
+    n = bstr.length,
+    u8arr = new Uint8Array(n)
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n)
+  }
+  return new File([u8arr], filename, {
+    type: mime
+  })
+}
+
+
+function beforeUpload_shishi(nfile, uid, cid, task, tool, atool, type) {
+  const file = nfile
+  const credentials = {
+    accessKeyId: 'AKIATLPEDU37QV5CHLMH',
+    secretAccessKey: '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',
+  } // 秘钥形式的登录上传
+  window.AWS.config.update(credentials)
+  window.AWS.config.region = 'cn-northwest-1' // 设置区域
+
+  const bucket = new window.AWS.S3({
+    params: {
+      Bucket: 'ccrb'
+    }
+  }) // 选择桶
+
+  if (file) {
+    const params = {
+      Key: file.name.split('.')[0] + new Date().getTime() + '.' + 'png',
+      ContentType: file.type,
+      Body: file,
+      'Access-Control-Allow-Credentials': '*',
+      ACL: 'public-read',
+    } // key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
+    const options = {
+      partSize: 2048 * 1024 * 1024,
+      queueSize: 2,
+      leavePartsOnError: true,
+    }
+    bucket.upload(params, options)
+      .on('httpUploadProgress', function(evt) {
+        // 这里可以写进度条
+        // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
+      }).send(function(err, data) {
+        console.log(data.Location)
+        const a = {
+          name: file.name,
+          url: data.Location,
+          uid: file.uid,
+        }
+        addSWork_shishi(uid, cid, a, task, tool, atool, type)
+      })
+  }
+}
+
+function addSWork_shishi(uid, cid, a, task, tool, atool, type) {
+  const params = {
+    uid: uid,
+    cid: cid,
+    stage: '0',
+    task: task,
+    tool: tool,
+    atool: atool,
+    content: a.url,
+    type: type,
+  }
+  $.ajax({
+    type: 'GET',
+    url: 'https://pbl.cocorobo.cn/api/pbl/addCourseWorks_workPage2',
+    data: params,
+    dataType: 'json',
+    success: (data) => {
+      const _a = document.getElementsByTagName('img')
+      for (let i = 0; i < _a.length; i++) {
+        _a[i].removeAttribute('crossorigin')
+      }
+      parent.document.getElementById('shishi_loading').style.display = 'none'
+      const _div = document.createElement('div')
+      _div.style = 'width:100%;height:100%;background:#0000008f;position:fixed;top:0;left:0;z-index:99999999999999;display: flex;justify-content: center;align-items: center;'
+      const _inner = document.createElement('div')
+      _inner.style = 'color: #fff;padding: 15px;background: #00000070;border-radius: 5px;font-size: 18px;'
+      _inner.innerHTML = '截图上传成功'
+      _div.appendChild(_inner)
+      document.body.appendChild(_div)
+      setTimeout(() => {
+        //  document.body.removeChild(_loading)
+        document.body.removeChild(_div)
+      }, 2000)
+      console.log('截图上传成功')
+    }
+  })
+}