<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="generatePdfFromWebview">
<cover-view class="btn-text">生成PDF</cover-view>
</cover-view>
</cover-view>
</view>
</template>
<script setup lang="ts">
import { onLoad} from '@dcloudio/uni-app';
import { ref } from 'vue';
import jsPDF from 'jspdf';
declare const plus
: any;
const webviewPath = ref('');
// const ws = ref<any>(null);
// const pdfFilePath = ref('');
const showPdfPreview = ref(false);
const platform = ref('');
// const htmlContent = ref('');
const pdfViewerUrl = ref('');
onLoad((options
: any) => {
if (options.url) {
webviewPath.value = decodeURIComponent(options.url);
pdfViewerUrl.value = `/static/pdfjs/web/viewer.html?file=${encodeURIComponent(webviewPath.value)}`;
}
// 获取当前平台
const systemInfo = uni.getSystemInfoSync();
platform.value = systemInfo.platform;
});
const generatePdfFromWebview = async () => {
const pdfUrl = 'https
://example.com/document.pdf';
uni.navigateTo({
url
: `/pages/pdf-preview?pdfUrl=${encodeURIComponent(pdfUrl)}`
});
}
</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;
}
/* PDF预览组件
样式 */
.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
: 100rpx;
background-color
: #007aff;
color
: #ffffff;
display: flex;
align-items
: center;
justify-content
: center;
position: relative;
}
.title-container {
display: flex;
align-items
: center;
justify-content
: center;
width
: 100%;
}
.preview-title {
color
: #ffffff;
font-size
: 34rpx;
font-weight
: bold;
}
.close-btn {
position: absolute;
right
: 30rpx;
font-size
: 40rpx;
color
: white;
}
.preview-pdf {
width
: 100%;
height
: calc(100% - 100rpx - 120rpx);
background-color
: white;
}
.action-buttons {
display: flex;
width
: 100%;
justify-content
: space-between;
padding
: 30rpx 5%;
margin-top
: auto;
background-color
: #353336;
box-sizing
: border-box;
}
.action-btn {
flex: 1;
height
: 90rpx;
border-radius
: 12rpx;
display: flex;
align-items
: center;
justify-content
: center;
margin
: 0 15rpx;
color
: #ffffff;
font-size
: 34rpx;
font-weight
: 500;
}
.cancel-btn {
background-color
: #666;
}
.confirm-btn {
background-color
: #007aff;
}
</style>
这是webview页面 应该怎样修改
当小程序页面中的父元素使用display:flex布局时，若其子元素采用position:absolute布局，在苹果6s/6P/6sP设备上会出现兼容性问题，导致页面布局混乱。此问题在开发工具中无法复现，仅在特定真实设备上出现。
扫一扫
4988
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
