FE-lab-xcx/pages_safetyEducationExamination/component/richTextPdf.vue

<!-- 富文本PDF预览与下载组件 (小程序版本) -->
<template>
	<view class="rich-text-pdf-wrapper">
		<scroll-view scroll-y class="content-scroll">
			<view class="rich-content">
				<rich-text :nodes="content"></rich-text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: 'RichTextPdf',
		props: {
			content: {
				type: String,
				default: ''
			},
			examId: {
				type: [String, Number],
				default: ''
			}
		},
		data() {
			return {
				loading: false
			};
		},
		methods: {
			// 微信小程序版本：使用 Canvas 生成图片后保存
			async downloadPDF() {
				if (!this.content) {
					uni.showToast({
						title: '没有可下载的内容',
						icon: 'none'
					});
					return;
				}

				this.loading = true;
				uni.showLoading({ title: '生成中...' });

				try {
					// 由于小程序限制，这里使用简化方案：
					// 1. 将富文本内容通过截图保存为图片
					// 2. 或者直接保存HTML内容供后续查看

					// 方案1: 使用 Canvas 截图（需要配合后端或使用第三方服务）
					// 由于小程序无法直接将 rich-text 渲染到 canvas，
					// 这里采用保存为图片的简化方案

					this._saveAsImage();

				} catch (error) {
					console.error('PDF 生成失败:', error);
					uni.showToast({
						title: 'PDF下载失败，请重试',
						icon: 'none'
					});
				} finally {
					this.loading = false;
					uni.hideLoading();
				}
			},

			// 调用后端PDF下载接口
			_saveAsImage() {
				const { config } = require('@/api/request/config.js');
				const token = uni.getStorageSync('token');
				const url = config.base_url + '/exam/user/exam/commitment/download?examId=' + this.examId;

				uni.downloadFile({
					url,
					header: {
						'Authorization': token
					},
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveFile({
								tempFilePath: res.tempFilePath,
								success: () => {
									uni.showToast({ title: '下载成功', icon: 'success' });
								},
								fail: () => {
									uni.showToast({ title: '保存失败，请重试', icon: 'none' });
								}
							});
						} else {
							uni.showToast({ title: 'PDF下载失败', icon: 'none' });
						}
					},
					fail: () => {
						uni.showToast({ title: 'PDF下载失败，请重试', icon: 'none' });
					}
				});
			}
		}
	};
</script>

<style lang="stylus" scoped>
	.rich-text-pdf-wrapper {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background: #fff;
	}

	.content-scroll {
		flex: 1;
		overflow: hidden;
	}

	.rich-content {
		padding: 40rpx;
		font-size: 28rpx;
		line-height: 1.8;
		color: #333;
		word-wrap: break-word;
	}
</style>