将.docx格式文件转成html,uniapp使用u-parse展示

使用mammoth。

1、在index.html中加入:

html 复制代码
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>docx转html</title>
	</head>
	<body>
		<input id="document" type="file" />
		<div id="output" class="well"></div>
	</body>
	<script src="https://cdn.bootcdn.net/ajax/libs/mammoth/1.4.17/mammoth.browser.min.js"></script>
	<script type="text/javascript">
		document.getElementById("document").addEventListener("change", readFileInputEventAsArrayBuffer, false);
 
		function displayResult(result) {
			let html = result.value;
			console.log(html); //获得html,类似:'<p style="text-align: center; line-height: 2;"></p>'
			let newHTML = html
				.replace(//g, "")
				.replace("<h1>", '<h1 style="text-align: center;">')
				.replace(/<table>/g, '<table style="border-collapse: collapse;">')
				.replace(/<tr>/g, '<tr style="height: 30px;">')
				.replace(/<td>/g, '<td style="border: 1px solid pink;">')
				.replace(/<p>/g, '<p style="text-indent: 2em;">');
			document.getElementById("output").innerHTML = newHTML;
		}
 
		function readFileInputEventAsArrayBuffer(event) {
			var file = event.target.files[0];
			var reader = new FileReader();
			reader.onload = function (loadEvent) {
				var arrayBuffer = loadEvent.target.result; //arrayBuffer
				mammoth.convertToHtml({ arrayBuffer: arrayBuffer }).then(displayResult).done();
			};
			reader.readAsArrayBuffer(file);
		}
	</script>
	<!-- 参考:https://github.com/mwilliamson/mammoth.js/ -->
</html>

2、从页面获得html内容。

3、uniapp中展示相关的用户协议、隐私协议之类:

javascript 复制代码
<template>
  <view>
    <u-parse :html="content" />
  </view>
</template>
相关推荐
岁月宁静3 小时前
深度定制:在 Vue 3.5 应用中集成流式 AI 写作助手的实践
前端·vue.js·人工智能
2501_915909063 小时前
“绑定 HTTPS” 的工程全流程 从证书配置到真机验证与故障排查
网络协议·http·ios·小程序·https·uni-app·iphone
心易行者3 小时前
10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线
前端
saadiya~4 小时前
ECharts 实时数据平滑更新实践(含 WebSocket 模拟)
前端·javascript·echarts
fruge4 小时前
前端三驾马车(HTML/CSS/JS)核心概念深度解析
前端·css·html
百锦再4 小时前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net
烛阴4 小时前
Lua 模块的完整入门指南
前端·lua
2501_915918414 小时前
iOS 混淆实战 多工具组合完成 IPA 混淆、加固与工程化落地(iOS混淆|IPA加固|无源码混淆|Ipa Guard|Swift Shield)
android·ios·小程序·https·uni-app·iphone·webview
浪里行舟5 小时前
国产OCR双雄对决?PaddleOCR-VL与DeepSeek-OCR全面解析
前端·后端
znhy@1235 小时前
CSS易忘属性
前端·css