将.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>
相关推荐
特立独行的猫A2 分钟前
一份代码,多端产物:仓颉语言的cj-tauri 框架开发桌面和鸿蒙应用指南
前端
代码猎人3 分钟前
前端怎么精通Vue3核心原理
前端
不可能片场6 分钟前
工程实践 台账备份从全量复制改成增量日志
前端·electron
2603_965896628 分钟前
CSS BEM 命名规范|组件化样式分层权威指南
前端·javascript·css
进击的明明9 分钟前
前端开发中的 BEM 国际命名规范:让 CSS 不再"打架"
前端·css·html
deli00713 分钟前
中文在网址里为什么变成 E4B8AD?URL 编码 22 组用例实测
前端
羲云18 分钟前
MOSS-Image 开源后爆火:5B 生图模型真正值得关注的,是可控排版
前端
BreezeJiang27 分钟前
闭包和 useState 是两个知识点?你可能只学了半条作用域链
前端·面试
2601_9583529038 分钟前
一款模块通吃15类语音产品?AN-93如何实现录音笔、门禁、IPC的快速适配
前端·人工智能·嵌入式硬件·回声消除·降噪处理
子兮曰40 分钟前
Bun v1.4.4 实测:2,025 个文件,bun fmt 2.6 秒跑完
前端·后端·bun