<!-- pages/webview/webview
.vue -->
<template>
<view class="webview-container">
<cover-view class="webview-wrapper">
<web-view :src="webviewPath" id="targetWebview"></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 { 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('');
onLoad((options: any) => {
if (options
.url) {
webviewPath
.value = decodeURIComponent(options
.url);
}
// 获取当前平台
const systemInfo =
uni.getSystemInfoSync();
platform
.value = systemInfo
.platform;
});
onReady(
() => {
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;
}
}, 1000);
});
const captureWebview = async
() => {
if (!ws
.value) {
uni.showToast({ title: 'WebView未准备好', icon: 'none' });
return;
}
uni.showLoading({
title:'正在取证中'
})
// #ifdef APP-PLUS
// #endif
// #ifdef APP-H5
// #endif
}
const closePreview =
() => {
showPreview
.value = false;
}
const handleAction = (action: string) => {
switch(action) {
case '放弃':
closePreview
();
break;
case '固化':
uni.saveImageToPhotosAlbum({
filePath: screenshotPath
.value,
success:
() => {
uni.showToast({ title: '证据已固化保存' });
//
调用上传函数
// uploadEvidence
();
},
fail: (err) => {
uni.showToast({ title: '保存失败: ' + err
.errMsg, icon: 'none' });
}
});
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>
app设备中 将webview内容转换成pdf格式
在小程序中，getSystemInfoSync()返回的screenHeight和windowHeight在不同阶段可能有不同的值。初次加载时，两者可能相等，但在onReady之后，windowHeight会减去顶部和底部导航栏的高度，表现为正常的页面视图高度。因此，当在页面初始化完成后调用getSystemInfoSync()，才能得到正确的windowHeight值。
1037
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
扫一扫
