<!-- pages/
webview/
webview.vue -->
<template>
<view class="
webview-container">
<cover-view class="
webview-wrapper">
<web-view :src="
webviewPath" id="target
Webview"></web-view>
</cover-view>
<cover-view class="bottom-action-area">
<cover-view class="capture-btn" @click="capture
Webview">
<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 original
WebviewHeight = 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 current
Webview = currentPage.$getApp
Webview();
setTimeout(() => {
if (current
Webview.children().length > 0) {
const wv = current
Webview.children()[0];
ws.value = wv;
}
}, 1000);
});
const capture
Webview = 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格式
本文介绍三种不同的方法来调整WebView中的内容样式，包括字体大小、颜色及背景颜色等。通过使用JavaScript或直接修改HTML字符串的方式实现对显示效果的精确控制。
扫一扫
1100
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
