将.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>
相关推荐
J***Q29244 分钟前
Vue数据可视化
前端·vue.js·信息可视化
ttod_qzstudio2 小时前
深入理解 Vue 3 的 h 函数:构建动态 UI 的利器
前端·vue.js
_大龄3 小时前
前端解析excel
前端·excel
一叶茶3 小时前
移动端平板打开的三种模式。
前端·javascript
前端大卫3 小时前
一文搞懂 Webpack 分包:async、initial 与 all 的区别【附源码】
前端
Want5953 小时前
HTML音乐圣诞树
前端·html
老前端的功夫4 小时前
前端浏览器缓存深度解析:从网络请求到极致性能优化
前端·javascript·网络·缓存·性能优化
Running_slave4 小时前
你应该了解的TCP滑窗
前端·网络协议·tcp/ip
程序员小寒5 小时前
前端高频面试题之CSS篇(一)
前端·css·面试·css3
颜酱5 小时前
Monorepo 架构以及工具选型、搭建
前端·javascript·node.js