zhywpt-h5/components/Hetong/Protocol.vue

<template>
	<view class="view-container">
		<scroll-view :scroll-y="true" style="height: 100%" v-if='isUrl!== 1'>
			<view ref="container" class="docx-content"></view>
		</scroll-view>
		<view v-else class='empty-view'>{{errTxt}}</view>
	</view>
</template>
<script setup>
	import {
		ref,
		onMounted,
		nextTick
	} from 'vue';
	import {
		renderAsync
	} from 'docx-preview'; // 引入异步渲染方法

	const props = defineProps({
		url: {
			type: String,
			default: ''
		}
	});
	onMounted(() => {
		getFile(props.url);
	});
	let container = ref(null);
	const isUrl = ref(0)
	let errTxt = ref('请求文件错误，文件不存在')

	function getFile(url) {
		uni.showLoading({
			title: '加载中',
			mask: true
		});
		console.log(url, '地址');
		let x = new XMLHttpRequest();
		x.open('GET', url, true);
		x.responseType = 'blob';
		x.onload = function(e) {
			//self.exportLoading = false;
			console.log(e, x, 'e');
			if (x.status === 400) {
				isUrl.value = 1
				uni.hideLoading()
			} else {
				const blob = new Blob([x.response]);
				filechange(blob);
			}

		};
		x.send();
	}

	function filechange(blob) {
		console.log(blob, container.value);
		renderAsync(blob, container.value.$el, null, {
			className: 'docx', // 默认和文档样式类的类名/前缀
			inWrapper: true, // 启用围绕文档内容渲染包装器
			ignoreWidth: false, // 禁止页面渲染宽度
			ignoreHeight: false, // 禁止页面渲染高度
			ignoreFonts: false, // 禁止字体渲染
			breakPages: true, // 在分页符上启用分页
			ignoreLastRenderedPageBreak: true, //禁用lastRenderedPageBreak元素的分页
			experimental: false, //启用实验性功能（制表符停止计算）
			trimXmlDeclaration: true, //如果为真，xml声明将在解析之前从xml文档中删除
			breakPages: true, // 在分页符上启用分页
			debug: false // 启用额外的日志记录
		}).then((res) => {
			let timer = setTimeout(() => {
				const $slides = document.querySelectorAll('section.docx');
				uni.hideLoading();
				// if ($slides.children.length) {
				// const slidesWidth = Math.max(
				// 	...Array.from($slides.children).map((s) => s.offsetWidth)
				// );
				const $wrapper = document.querySelector('.docx-wrapper');
				const wrapperWidth = $wrapper.offsetWidth;
				let wrapperHeight = 0;
				$slides.forEach((item) => {
					wrapperHeight = handleScale(item, wrapperWidth, wrapperHeight);
				});

				$wrapper.style.height = wrapperHeight + 5 + 'px';
				console.log(wrapperHeight + 'px');
				isUrl.value = 2
				clearInterval(timer);
				// }
			}, 100);
		}).catch(err => {
			isUrl.value = 1
			errTxt.value = '请求文件错误，只支持docx文件，当前文件地址：' + props.url
			uni.hideLoading();

			console.log(errTxt, isUrl, '错误');
		})
	}
	const handleScale = (ele, wrapperWidth, wrapperHeight) => {
		const slidesWidth = ele.offsetWidth;
		const scales = wrapperWidth / slidesWidth;
		ele.style.transform = `scale(${scales})`;
		ele.style.transformOrigin = 'top center';
		wrapperHeight = ele.offsetHeight * scales + wrapperHeight + 5;
		return wrapperHeight;
	};
</script>
<style>
	.docx-content {
		width: 100%;
		height: 100%;
	}

	.view-container {
		width: 100%;
		height: 100%;
		overflow: auto;
	}

	/deep/.docx-wrapper {
		padding: 0 !important;
		width: 100%;
	}

	/deep/.docx-wrapper>section.docx {
		width: 100% !important;
		display: table !important;
		padding: 2em 1em 0 !important;
		margin-bottom: 5px;
	}

	.empty-view {
		text-align: center;
		padding: 40rpx 0;
	}
</style>