zhywpt-h5/components/Protocol.vue

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

	onMounted(() => {
		getFile('/sett-minio/template/ETC用户协议(阳光行A).docx')
	})
	let container = ref(null);
	let renderContext = ref(null);

	function getFile(url) {
		uni.showLoading({
			title: "加载中",
			mask: true
		})
		let x = new XMLHttpRequest()
		x.open('GET', url, true)
		x.responseType = 'blob'
		x.onload = function() {
			//self.exportLoading = false;
			const blob = new Blob([x.response]);
			filechange(blob)
		}
		x.send()
	}


	function filechange(blob) {
		console.log(blob, container.value.$el);
		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.querySelector(".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;
					console.log(wrapperWidth);
					$wrapper.style.transform = `scale(${wrapperWidth / slidesWidth})`
					$wrapper.style.transformOrigin = "top center"
					// $wrapper.style.height = wrapperHeight * (1 / (wrapperWidth / slidesWidth)) + "px"
					clearInterval(timer);
				}
			}, 100)
		})
	}
</script>
<style>
	.docx-content {
		width: 100%;
		height: 100%;
	}

	.view-container {
		width: 100%;
		height: 100%;
		padding: 0 16rpx;
		overflow: auto;
	}

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

	/deep/.docx {
		width: 100% !important;
		display: table !important;
		padding: 2em 1em 0 !important;
	}
</style>