<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">立即取证</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';
import jsPDF from 'jspdf';
// 状态管理
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
if (
!ws.value) {
uni.showToast({ title: '网页未加载完成', icon: 'none' });
return;
}
const timestamp = new Date().getTime();
const pdfPath = `_doc/evidence_${timestamp}.pdf`;
// 调用draw方法生成PDF
ws.value.draw('', {
format: 'pdf',
filename: pdfPath,
background: '#FFFFFF'
}, (res:any) => {
console.log('PDF生成成功:', res);
const localUrl = plus.io.convertLocalFileSystemURL(res.filename);
pdfFilePath.value = res.filename;
//
直接设置预览URL，不需要resolveLocalFileSystemURL
pdfPreviewUrl.value = `/static/pdfjs/web/viewer.html?file=${encodeURIComponent(localUrl)}`;
showPreview.value = true;
uni.hideLoading();
}, (err:any) => {
console.error('PDF生成失败:', err);
uni.hideLoading();
uni.showToast({
title: `生成失败: ${err.message}`,
icon: 'none'
});
});
// #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>
为什么预览pdf的时候 没有pdf的内容
在视频播放列表模板中，尝试通过标题链接直接播放视频，但点击标题后无法正确播放视频且路径错误。寻求解决方案以实现点击标题即可播放。
扫一扫
4819
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
