ts_aimz_uni/pages/common/readTxt/readTxt.vue

<template>
	<view class="page-container">
		<view class="hint">温馨提示:如需编辑或分享文字，您可选中文字，一键复制至微信或文档内进行操作。</view>
		<view class="content" v-if="txtParagraphs != null && txtParagraphs.length>0">
			<view v-for="(item,index) in txtParagraphs" :key="index">
				<text selectable="true">{{item}}</text>
				<view style="height: 10px;"></view> <!-- 段落间隔 -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fileUrl: '',
				txtParagraphs: []
			}
		},
		onLoad(options) {
			this.fileUrl = options.filePath
			uni.setNavigationBarTitle({
				title: '文档'
			})
			uni.setNavigationBarColor({
				frontColor: '#000000', // 必写项，字体颜色仅支持#ffffff和#000000
				backgroundColor: '#F0F0F0', // 传递的颜色值，仅支持十六进制颜色
				animation: { // 可选项
					duration: 500,
					timingFunc: 'easeIn'
				}
			})
			this.readTxt()
		},
		methods: {
			readTxt() {
				const _self = this
				const fs = uni.getFileSystemManager();
				fs.readFile({
					filePath: _self.fileUrl,
					encoding: 'utf8',
					success: (readRes) => {
						const fileContent = readRes.data;
						// 简单示例：按空行拆分段落
						const paragraphs = fileContent.split('\n\n').map((p) => p.trim()).filter((p) => p);
						// 将处理后的段落数据设置到页面数据中
						_self.txtParagraphs = paragraphs
						console.log(_self.txtParagraphs)
					},
					fail: (readErr) => {
						console.error('读取txt文件内容失败：', readErr);
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	/* pages/readTxt/readTxt.wxss */
	page {
		background-color: white;
	}

	.hint {
		font-size: 14px;
		text-align: center;
		color: rgb(248, 185, 50);
		font-weight: bold;
	}

	.content {
		padding: 10px;
		border: 1px solid #dfdddd;
		border-radius: 5px;
	}
</style>