flex-iframe移动,以及关闭问题

       protected function init():void{

            addEventListener("move",ifrDragHandler,false);// 组件移动时事件  
            addEventListener("close",close, false);  
        }  
        private function ifrDragHandler(evt:MoveEvent):void{  
            Alert.show("===");  
            var thisNode:AlertWindowExample = evt.currentTarget as AlertWindowExample;  
            var ifr:IFrame = thisNode.getElementAt(0) as IFrame;  
            ifr.invalidateDisplayList();// 避免弹出框移动时,jsp或html页面不一起移动  
            evt.stopPropagation();// 阻止事件冒泡  
        }  
          
        private function close(evt:CloseEvent):void {  
            PopUpManager.removePopUp(this);  
            evt.stopPropagation();  
        } 

----------------

上面的那个关闭窗口貌似不大好用,于是又找到了下面的关闭方法。


在使用PopUpManager弹出一个自定义窗口时,把窗口关闭是常用的操作。在非模式弹出窗口条件下,需要在点击窗口之外的区域把窗口关掉。

FLEX有一个鼠标事件可以处理窗口之外的事件响应,这个事件就是MOUSE_DOWN_OUTSIDE,这个事件不怎么常用。为弹出窗口添加此事件:
this.addEventListener(FlexMouseEvent.MOUSE_DOWN_OUTSIDE,hide);

private function hide(event:FlexMouseEvent){
PopUpManager.removePopUp(this);
}

这样在窗口之外单击后,就把当前的弹出窗口移除。




http://blog.chinaunix.net/uid-26434689-id-3737840.html

http://www.byywee.com/page/M0/S263/263097.html

<template> <view class="container"> <web-view :src="webviewPath" id="targetWebview" @message="handleWebviewMessage" ></web-view> <cover-view class="bottom-action-area"> <cover-view class="capture-btn" @click="generatePDF"> <cover-view class="btn-text">生成PDF证据</cover-view > </cover-view > </cover-view > <!-- PDF预览组件 --> <cover-view v-if="showPreview" class="pdf-preview"> <cover-view class="preview-header"> <cover-view class="title-container"> <cover-view class="preview-title">证据预览</cover-view > </cover-view > </cover-view > <web-view v-if="pdfPreviewUrl" :src="pdfPreviewUrl" class="preview-iframe" ></web-view> <cover-view class="action-buttons"> <cover-view class="action-btn cancel-btn" @click="closePreview">放弃</cover-view > <cover-view class="action-btn confirm-btn" @click="savePDF">保存证据</cover-view > </cover-view > </cover-view > </view> </template> <script setup lang="ts"> import { ref, onMounted } from 'vue'; import { onLoad, onReady } from '@dcloudio/uni-app'; import html2canvas from 'html2canvas'; // 状态管理 const webviewPath = ref(''); const showPreview = ref(false); const pdfPreviewUrl = ref(''); const pdfFilePath = ref(''); const currentWebview = ref<any>(null); const platform = ref(''); const ws = ref<any>(null); // 初始化 onLoad((options: any) => { if (options.url) { webviewPath.value = decodeURIComponent(options.url); } // 获取平台信息 const systemInfo = uni.getSystemInfoSync(); platform.value = systemInfo.platform || ''; }); // 准备阶段获取 WebView 实例 onReady(() => { // #ifdef APP-PLUS const pages = getCurrentPages(); const page = pages[pages.length - 1]; const webview = page.$getAppWebview(); setTimeout(() => { if (webview.children().length > 0) { const wv = webview.children()[0]; ws.value = wv; console.log(ws.value) } }, 1000); // #endif }); // 生成PDF const generatePDF = () => { uni.showLoading({ title: '生成证据中...', mask: true }); // #ifdef APP-PLUS // const wv = this.$scope.$getAppWebview(); setTimeout(() => { if (!ws.value) { uni.showToast({ title: '网页未加载完成', icon: 'none' }); return; } const timestamp = new Date().getTime(); const pdfPath = `_doc/evidence_${timestamp}.pdf`; // 使用 plus.draw 生成PDF ws.value.draw(ws, { format: 'pdf', filename: pdfPath, background: '#FFFFFF', success: (res:any) => { pdfFilePath.value = res.filePath; preparePDFPreview(res.filePath); uni.hideLoading(); }, fail: (err:any) => { console.error('PDF生成失败:', err); uni.hideLoading(); uni.showToast({ title: `生成失败: ${err.message}`, icon: 'none' }); } }); }, 800) // #endif // #ifdef H5 // H5环境使用html2canvas + jsPDF generatePDFForH5(); // #endif }; // 准备PDF预览 const preparePDFPreview = (filePath: string) => { // #ifdef APP-PLUS plus.io.resolveLocalFileSystemURL( filePath, (entry) => { const localUrl = entry.toLocalURL(); // 使用PDF.js预览 pdfPreviewUrl.value = `/static/pdfjs/web/viewer.html?file=${encodeURIComponent(localUrl)}`; showPreview.value = true; }, (err) => { console.error('文件访问失败:', err); uni.showToast({ title: '文件访问失败', icon: 'none' }); } ); // #endif }; // 保存PDF到相册 const savePDF = () => { // #ifdef APP-PLUS if (!pdfFilePath.value) return; // plus.gallery.save( // pdfFilePath.value, // { filename: `evidence_${Date.now()}.pdf` }, // () => { // uni.showToast({ title: '证据保存成功' }); // closePreview(); // }, // (err) => { // uni.showToast({ title: `保存失败: ${err.message}`, icon: 'none' }); // } // ); // #endif // #ifdef H5 // H5环境下载PDF const link = document.createElement('a'); link.href = pdfFilePath.value; link.download = `evidence_${Date.now()}.pdf`; link.click(); closePreview(); // #endif }; // 关闭预览 const closePreview = () => { showPreview.value = false; pdfPreviewUrl.value = ''; }; // H5环境PDF生成(使用html2canvas + jsPDF) const generatePDFForH5 = () => { // #ifdef H5 // const iframe = document.getElementById('targetWebview') as HTMLIFrameElement; // if (!iframe || !iframe.contentWindow) return; // const iframeDoc = iframe.contentWindow.document; // html2canvas(iframeDoc.body, { // useCORS: true, // scale: 2 // }).then(canvas => { // const imgData = canvas.toDataURL('image/jpeg', 0.95); // const pdf = new jsPDF('p', 'mm', 'a4'); // const imgWidth = pdf.internal.pageSize.getWidth(); // const imgHeight = (canvas.height * imgWidth) / canvas.width; // pdf.addImage(imgData, 'JPEG', 0, 0, imgWidth, imgHeight); // const pdfBlob = pdf.output('blob'); // pdfFilePath.value = URL.createObjectURL(pdfBlob); // // H5环境预览 // pdfPreviewUrl.value = pdfFilePath.value; // showPreview.value = true; // uni.hideLoading(); // }).catch(err => { // console.error('H5 PDF生成失败:', err); // uni.hideLoading(); // uni.showToast({ title: '生成失败', icon: 'none' }); // }); // #endif }; // 处理WebView消息 const handleWebviewMessage = (e: any) => { console.log('收到WebView消息:', e.detail); }; </script> <style scoped> .container { position: relative; height: 100vh; overflow: hidden; } #targetWebview { width: 100%; height: calc(100vh - 100px); } .bottom-action-area { position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; background-color: #007aff; padding: 15px; display: flex; justify-content: center; padding-bottom: calc(10rpx + constant(safe-area-inset-bottom)); padding-bottom: calc(10rpx + env(safe-area-inset-bottom)); } .capture-btn { width: 100%; height: 90rpx; padding: 12px; background-color: #007aff; border-radius: 8px; display: flex; align-items: center; justify-content: center; } .btn-text { color: white; font-size: 14px; font-weight: 500; } /* PDF预览样式 */ .pdf-preview { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; background-color: white; display: flex; flex-direction: column; } .preview-header { background-color: #007aff; padding: 15px; } .title-container { display: flex; justify-content: center; } .preview-title { color: white; font-size: 18px; font-weight: bold; } .preview-iframe { flex: 1; width: 100%; border: none; } .action-buttons { display: flex; padding: 15px; background-color: #f5f5f5; } .action-btn { flex: 1; padding: 12px; border-radius: 8px; text-align: center; font-weight: 500; } .cancel-btn { background-color: #f5f5f5; color: #333; margin-right: 10px; } .confirm-btn { background-color: #007aff; color: white; margin-left: 10px; } </style> 应该怎样修改 正确的在app内 将webview内容转换成pdf格式
最新发布
08-08
<template> <view class="webview-container"> <cover-view class="webview-wrapper"> <web-view :src="webviewPath" id="targetWebview" allow-same-origin sandbox="allow-same-origin allow-scripts" ref="webviewRef"></web-view> </cover-view> <cover-view class="bottom-action-area"> <cover-view class="capture-btn" @click="captureWebview"> <cover-view class="btn-text">立即取证</cover-view> </cover-view> </cover-view> <!-- 预览组件 --> <cover-view v-if="showPreview" class="custom-preview"> <cover-view class="preview-header"> <cover-view class="title-container"> <cover-view class="preview-title">预览界面</cover-view> </cover-view> </cover-view> <cover-image :src="screenshotPath" class="preview-image" mode="aspectFit" @error="handleImageError" ></cover-image > <cover-view class="action-buttons"> <cover-view class="action-btn cancel-btn" @click="handleAction('放弃')">放弃</cover-view> <cover-view class="action-btn confirm-btn" @click="handleAction('固化')">固化</cover-view> </cover-view> <cover-view> </cover-view> </cover-view> </view> </template> <script setup lang="ts" > import { onLoad, onReady } from '@dcloudio/uni-app'; import html2canvas from 'html2canvas'; import { nextTick, ref } from 'vue'; declare const plus: any; const webviewPath = ref(''); const ws = ref<any>(null); const screenshotPath = ref(''); const showPreview = ref(false); const platform = ref(''); const originalWebviewHeight = ref('auto'); const screenshotFilePath = ref(''); const screenshot = ref(''); const iframeLoaded = ref(false); onLoad((options: any) => { if (options.url) { webviewPath.value = decodeURIComponent(options.url); } // 获取当前平台 const systemInfo = uni.getSystemInfoSync(); platform.value = systemInfo.platform; }); onReady(() => { // #ifdef APP-PLUS const pages = getCurrentPages(); const currentPage = pages[pages.length - 1]; const currentWebview = currentPage.$getAppWebview(); setTimeout(() => { if (currentWebview.children().length > 0) { const wv = currentWebview.children()[0]; ws.value = wv; // originalWebviewHeight.value = wv.getStyle().height || 'auto'; wv.setStyle({ height: 'auto' }); } }, 1000); // #endif // #ifdef H5 const iframe = document.getElementById('targetWebview'); console.log(iframe) if (!iframe) { console.warn('未找到 iframe 元素'); return; } // 设置加载监听 // #endif }); const captureWebview = async () => { uni.showLoading({ title: '正在取证中' }) // #ifdef APP-PLUS if (!ws.value) { uni.showToast({ title: '网页未加载完成', icon: 'none' }); return; } const bitmap = new plus.nativeObj.Bitmap('screenshot') const rand = Math.floor(Math.random() * 10000) const saveUrl = '_doc/' + rand + 'order.jpg' // 绘制页面截图 ws.value.draw(bitmap, () => { // 保存图片 bitmap.save( saveUrl, { format: 'jpg', quality: 90 }, (res:any) => { // 将本地路径转换为可以展示的路径 const previewPath = plus.io.convertLocalFileSystemURL(res.target) screenshotPath.value = previewPath screenshotFilePath.value = res.target; // 保存文件路径 console.log('截图保存成功,预览路径:', previewPath) // 延迟展示,确保加载完成 setTimeout(() => { showPreview.value = true uni.hideLoading() }, 300) bitmap.clear() // 清理 bitmap 占用资源 }, (err:any) => { console.error('保存失败:', err) uni.hideLoading() uni.showToast({ title: '保存失败: ' + err.message, icon: 'none', }) bitmap.clear() } ) }, (err:any) => { console.error('截图失败:', err) uni.showToast({ title: '截图失败: ' + err.message, icon: 'none', }) uni.hideLoading() }) // #endif // #ifdef H5 const iframe = document.getElementById('targetWebview') if (!iframe) { throw new Error("未找到 iframe 元素"); } html2canvas(iframe, { width: iframe.clientWidth, //dom 原始宽度 height: iframe.clientHeight, scrollY: 0, //html2canvas默认绘制视图内的页面,需要把scrollY,scrollX设置为0 scrollX: 0, useCORS: true //支持跨域 }).then((canvas)=>{ let base64 = canvas.toDataURL('image/png'); screenshotPath.value = base64; // 这里就按照chrome等新版浏览器来处理 // const a = document.createElement('a'); // a.href = base64; // a.setAttribute('download', 'pigeons-download'); // a.click(); setTimeout(() => { showPreview.value = true uni.hideLoading() }, 300) }) // #endif } const closePreview = () => { showPreview.value = false; } //上传 const uploadEvidence = () => { // #ifdef APP-PLUS // APP环境上传 plus.io.resolveLocalFileSystemURL(screenshotFilePath.value, (entry:any) => { console.log('文件存在,开始上传:', entry.name); // 继续执行上传逻辑 uni.showLoading({ title: '上传证据中...', mask: true }); // 获取文件系统路径 const filePath = entry.toLocalURL(); uni.uploadFile({ url: 'http://192.168.1.80:1592/api/upload', filePath: filePath, name: 'file', type: 'image', formData: { 'timestamp': Date.now() }, success: (uploadRes) => { uni.hideLoading(); try { const data = JSON.parse(uploadRes.data); if (data.success) { uni.showToast({ title: '证据上传成功', icon: 'none' }) } else { uni.showToast({ title: '上传失败', icon: 'none' }) console.log('上传失败') } } catch (e) { uni.showToast({ title: '解析响应失败', icon: 'none' }) } // 3秒后关闭状态提示 setTimeout(() => { closePreview(); }, 3000); }, fail: (err) => { uni.hideLoading(); console.error('上传错误详情:', err); uni.showToast({ title: '网络错误'+ err.errMsg, icon: 'none' }) setTimeout(() => { }, 3000); } }); }, (err:any) => { console.error('文件不存在或路径错误:', err); uni.showToast({ title: '文件路径无效', icon: 'none' }); } ); uni.showLoading({ title: '上传证据中...', mask: true }); // #endif // #ifdef APP-H5 // H5环境上传 // if (!screenshotFilePath.value) { // uni.hideLoading(); // uni.showToast({ title: '文件路径无效', icon: 'none' }); // return; // } // 获取文件对象 // fetch(screenshotFilePath.value) // .then(res => res.blob()) // .then(blob => { // const formData = new FormData(); // formData.append('evidence', blob, `evidence-${Date.now()}.jpg`); // formData.append('timestamp', Date.now().toString()); // return fetch('http://192.168.1.80:1592/api/upload', { // method: 'POST', // body: formData // }); // }) // .then(response => response.json()) // .then(data => { // uni.hideLoading(); // if (data.success) { // uni.showToast({ title: '证据上传成功', icon: 'none' }); // } else { // uni.showToast({ title: '上传失败'+ data.message, icon: 'none' }); // } // setTimeout(() => { // closePreview(); // }, 3000); // }) // .catch(err => { // uni.hideLoading(); // uni.showToast({ title: '上传失败'+ err.message, icon: 'none' }) // setTimeout(() => { // }, 3000); // }); // #endif } const handleAction = (action: string) => { switch(action) { case '放弃': closePreview(); break; case '固化': // #ifdef APP-PLUS uni.saveImageToPhotosAlbum({ filePath: screenshotPath.value, success: () => { uni.showToast({ title: '证据已固化保存' }); // 调用上传函数 uploadEvidence(); }, fail: (err) => { uni.showToast({ title: '保存失败: ' + err.errMsg, icon: 'none' }); } }); // #endif // #ifdef APP-H5 // #endif break; } } const handleImageError = (e: any) => { console.error('图片加载错误:', e); uni.showToast({ title: '图片加载错误', icon: 'none' }); } </script> <style> .webview-container { position: relative; width: 100%; height: 100vh; overflow: hidden; } .webview-wrapper { height: calc(100vh - 120rpx); width: 100%; overflow: hidden; } .bottom-action-area { position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; background-color: #007aff; padding: 30rpx; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); display: flex; justify-content: center; align-items: center; } .capture-btn { width: 100%; height: 90rpx; background-color: #007aff; border-radius: 45rpx; box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.2); display: flex; align-items: center; justify-content: center; } .btn-text { color: #ffffff; font-size: 32rpx; font-weight: 500; } /* 优化预览组件 */ .custom-preview { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; background-color: rgba(0, 0, 0, 0.9); display: flex; flex-direction: column; /* 垂直排列子元素 */ align-items: center; /* 关键修改:去掉顶部内边距,只保留底部内边距 */ padding: 0 0 40rpx 0; box-sizing: border-box; } .preview-header { width: 100%; height: 250rpx; /* 增加高度 */ background-color: #007aff; color: #ffffff; font-size: 34rpx; /* 增大字体 */ font-weight: bold; display: flex; align-items: center; justify-content: center; /* 添加圆角效果 */ border-top-left-radius: 16rpx; border-top-right-radius: 16rpx; } .preview-title { color: #ffffff; /* 白色字体 */ font-size: 28rpx; /* 字体大小适配40rpx高度 */ font-weight: bold; line-height: 40rpx; /* 与容器高度一致,实现垂直居中 */ width: 100%; text-align: center; } .preview-image { width: 100%; height: 100%; object-fit: contain; border: 1rpx solid rgba(255, 255, 255, 0.1); border-radius: 8rpx; background-color: #f5f5f5; box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.3); } .action-buttons { display: flex; width: 100%; /* 充满整个宽度 */ justify-content: space-between; padding: 30rpx 5%; /* 左右留5%间隙,上下30rpx内边距扩展背景区域 */ margin-top: auto; /* 借助flex布局推到最底部 */ background-color: #353336; /* 底部模块背景色 */ box-sizing: border-box; /* 确保padding不影响宽度计算 */ } .action-btn { flex: 1; height: 90rpx; border-radius: 12rpx; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0 15rpx; border: none; color: #ffffff; /* 文字色适配深色背景 */ font-size: 34rpx; font-weight: 500; line-height: 1; } .cancel-btn { color: #ffffff; /* 文字颜色 */ font-size: 34rpx; font-weight: 500; /* 确保文字本身无偏移 */ line-height: 1; /* 清除行高影响 */ text-align: center; /* 辅助居中(冗余保障) */ background-color: #353336; } .confirm-btn { color: #ffffff; /* 文字颜色 */ font-size: 34rpx; font-weight: 500; /* 确保文字本身无偏移 */ line-height: 1; /* 清除行高影响 */ text-align: center; /* 辅助居中(冗余保障) */ background-color: #353336; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .bottom-action-img{ position: fixed; top: 100; left: 0; right: 0; z-index: 100; background-color: #007aff; padding: 30rpx; display: flex; justify-content: center; align-items: center; } .action-img{ width: 100%; height: 90rpx; background-color: #007aff; display: flex; } </style> 截屏的内容为空白 根据这个代码修改
08-07
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值