将.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>
相关推荐
持续前行17 小时前
JavaScript 数组中删除偶数下标值的多种方法
前端·javascript·vue.js
baozj17 小时前
给 Ant Design Vue 装上"涡轮增压":虚拟列表封装实践
前端·javascript·vue.js
ohyeah17 小时前
构建现代 React 登录表单:从 ESM 懒加载到 TailwindCSS 响应式设计
前端·react.js
holidaypenguin17 小时前
常用MCP记录
前端·mcp
周星星日记17 小时前
一个例子搞懂vite快再哪里
前端·面试
一只爱吃糖的小羊17 小时前
AbortController 深度解析:Web 开发中的“紧急停止开关”
前端
码界奇点17 小时前
前端基础知识构建现代Web应用的基石
前端·青少年编程·web
C_心欲无痕17 小时前
网络相关 - Fetch 与 Ajax 请求讲解
前端·网络协议·ajax·fetch
得物技术17 小时前
前端平台大仓应用稳定性治理之路|得物技术
前端