<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="pdfPreview
Url"
:src="pdfPreview
Url"
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 pdfPreview
Url = 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.resolveLocalFileSystem
URL(
filePath,
(entry) => {
const local
Url = entry.toLocal
URL();
// 使用PDF.js预览
pdfPreview
Url.value = `/static/pdfjs/web/viewer.
html?file=${encodeURIComponent(local
Url)}`;
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;
pdfPreview
Url.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.toData
URL('
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.add
Image(imgData, 'JPEG', 0, 0, imgWidth, imgHeight);
// const pdfBlob = pdf.output('blob');
// pdfFilePath.value =
URL.createObject
URL(pdfBlob);
// // H5环境预览
// pdfPreview
Url.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格式
本文详细解析了在HTML中引用外部CSS样式表时，如何正确使用相对路径来加载背景图片，避免常见的加载失败问题。通过案例分析，揭示了CSS中URL属性路径设定的正确方式，为开发者提供了一套解决类似问题的方法。
扫一扫
6917
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
