国产linux系统（银河麒麟，统信uos）使用 PageOffice 在线打开Word文件，并用前端对话框实现填空填表

news2025/5/13 11:34:13

不管是政府机关、公司企业，还是金融行业、教育行业等单位，在办公过程中都经常需要填写各种文书和表格，比如通知、报告、登记表、计划表、申请表等。这些文书和表格往往是用Word文件制作的模板，比方说一个通知模板中经常会有“关于_______的通知”这样的文字，发布一个新通知时，让起草人员在通知模板的空白处填写。并且此类文件中还经常使用“□”字符作为复选框以供用户勾选，比如填写人员性别信息时的“□男 □女”，或者合同中付款方式的选项“□现金 □对公转账”等。然而，在Web办公系统中，用户在线填写这类Word文件时却遇到了诸多不便，“□”字符无法进行勾选操作，而改用Word自身的复选框内容控件不仅外观不佳，操作也不便，而且其选中状态是在方块中打叉，这与用户习惯的在方块中打钩不符，无法准确表达用户意图。更糟糕的是，用户在线填写信息后，系统无法自动提取这些信息，使得Web线上办公面临重大挑战。

再就是填写Word表格的问题，尽管Word作为文档编辑的标准工具，其表格设计功能强大，而且使用传统的Word表格填写方式，直接在Word文档内输入信息最直观易懂，最符合用户工作惯例，但是在Web办公系统中，让用户直接使用在线编辑Word文件填写表格的方式存在很大的问题。如果用户输入的操作不规范，或者用户录入的数据不规范，就有可能破坏表格的样式，对Word模板的破坏往往是不被允许的，至少有一个原因就是改变了模板的样式直接会破坏正式文件的打印效果。

填写Word表格的另一个问题就是难以收集用户填写的数据，用户直接在Word表格中输入数据被视为文档内容的一部分，填写的信息数据如同孤岛，没有直接的方法通过编程或其他自动化手段轻松地提取，难以被系统做进一步的数据自动化处理，如果不用手动复制粘贴的方式把数据二次录入到Web办公系统的话，就只能通过更复杂的文本解析技术勉强应对这一挑战。这就是传统Word中填写表格的局限性，限制了办公效率的进一步提升，特别是对于需要大量数据录入和分析的场景，这种手工操作不仅耗时费力，还容易出错。如果利用Word文档其内置的控件功能设计填报表格，比如制作简单如调查问卷或申请表单。然而，其本质并非专为数据处理设计，在Word中利用复选框等控件收集的数据难以直接以CSV或XML等结构化格式导出，导致后续数据分析需依赖额外工具，此过程繁琐且易出差错。尽管Word具备VBA编程能力，可定制宏以自动处理数据读取等任务，但这要求较高的技术门槛且实施复杂。此外，Word的表单控件在美学设计与功能自定义上略显不足，与现代Web界面相比缺乏交互性和动态性。还有Word中的下拉菜单数据无法与外部系统实时同步，复选框的显示可能不是勾而是叉，Word用户还可能遭遇控件不显示、版本兼容性问题及设计模式操作复杂等挑战。

针对上述问题，PageOffice V6.3版本的客户端控件新增Enabled属性，对采用标准div技术实现的界面元素，如模态对话框、弹出菜单及下拉选择框给予了更佳的支持，彻底解决了自浏览器诞生以来的各种文档控件、Office控件、Office插件必定遮挡界面元素的技术问题，因此提供了一种全新的Word文书和表格填写解决方案，利用现代Web前端中基于div技术的模态框，结合PageOffice操作文档中数据区域的接口来优化文书和表格的填写流程。div模态框是各种前端框架使用div制作的覆盖在当前页面之上的对话框，可以承载任何形式的HTML内容，包括form表单，这样一来，当用户需要填写Word表格时，可以触发一个精心设计的对话框，其中包含与Word表格项完全匹配的HTML表单，每个表单项与Word表格中的数据区域一一对应，这包括文本输入框、下拉选择、以及复选框等元素，用户在这个交互友好的环境中填写信息，体验更加流畅。用户在对话框中填写完毕后，前端脚本负责收集这些数据做自动化处理或保存到数据库，并通过PageOffice提供的API接口，将数据精确地填充到Word文档的对应的数据区域所在位置，完成对Word文件的同步填写工作。

采用前端框架内置对话框填写文书和表格的方案，不仅解决了数据收集与处理的难题，极大地提升了用户操作的便捷性和效率，而且完全保留了传统Word填写最直观易懂的优点，完美解决了用户在线填写文书和表格的问题。下面是一个简单的示例，演示了如何使用前端框架内置对话框填写一个“完税证明申请表”的效果。

  1. 在线打开一个“完税证明申请表”的Word表格，如下图所示：
    在这里插入图片描述

  2. 点击自定义工具栏中的“填写个税申请表”按钮，弹出前端框架内置模态框窗口，填写个人信息，如下图所示：
    在这里插入图片描述

  3. 填写完毕，点击确定按钮，调用PageOffice接口填充数据到Word表格中，效果如下图所示：
    在这里插入图片描述
    如上面示例所示，前端框架内置模态框窗口结合PageOffice提供的API接口实现了Word表格的在线填写，即提供了Word表格在线填写的便捷性，又保留了用户原有的Word表格填写习惯和效果，极大的减少了Web系统上线后对用户的培训工作和用户的学习成本，也降低了Web系统的上线难度，同时完成了对Word表格数据收集和数据处理自动化，大大提高了办公效率。如果实际使用过程中，在业务逻辑不变化的情况下需要对word表格的样式作出调整，那么客户可以自己在线打开Word模板重新定义表格的样式，而无需进行再次开发，不但让用户有了自己的自由度，而且也使得Web系统的适用性更强。

综上所述，使用本文提供的技术方案可以做到用户填写的表单数据、Word文件中填写的内容和数据库存储的数据都实时同步的效果。这样一来，不但实现了规范用户输入的目的，而且实现了用户填写数据与打印输出完全一致的所见即所得的效果，还有就是完全避免了在服务器端通过程序读写Word文件的传统操作。由于Word文件自身格式的复杂性，所以目前没有那种技术可以从word文件中读取百分之百正确的数据，如果采用先填写并保存Word文件，然后通过服务器端代码（比如POI技术等）从word中读取用户填写数据再保存数据库的方案，就一定会存在word文件和数据库中数据不一致的问题。所以采用此方案可以保证填写表格的web页面、word文件以及数据库数据的完全同步，同时，采用此方案后也再不需要任何对word文件做动态数据填充的技术了。这样一来，不但可以极大的缩短项目开发周期，降低开发的难度和成本，而且也使得程序的稳定性有了更好的保证。

后端代码

本示例无后端关键代码。

前端代码

个人信息对话框的HTML代码如下：

		<el-dialog title="填写个人信息" :visible.sync="dialogFormVisible1" @closed="closeDialog()">
			<el-form :model="form1" :rules="rules1" ref="form">
				<el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
					<el-input v-model="form1.name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="性别" :label-width="formLabelWidth">
					<el-radio-group v-model="form1.gender">
						<el-radio label="男">男</el-radio>
						<el-radio label="女">女</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="年龄" :label-width="formLabelWidth">
					<el-input-number v-model="form1.age" :min="1" :max="150"></el-input-number>
				</el-form-item>
				<el-form-item label="国籍" :label-width="formLabelWidth">
					<el-select v-model="form1.nationality" placeholder="请选择国籍">
						<el-option label="中国" value="中国"></el-option>
						<el-option label="美国" value="美国"></el-option>
						<!-- 其他国籍选项 -->
					</el-select>
				</el-form-item>
				<el-form-item label="证件类型" :label-width="formLabelWidth">
					<el-select v-model="form1.documentType" placeholder="请选择证件类型">
						<el-option label="身份证" value="身份证"></el-option>
						<el-option label="护照" value="护照"></el-option>
						<!-- 其他证件类型选项 -->
					</el-select>
				</el-form-item>
				<el-form-item label="证件号" :label-width="formLabelWidth">
					<el-input v-model="form1.documentNumber" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="申请理由" :label-width="formLabelWidth">
					<el-input type="textarea" v-model="form1.reason"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cacel1()">取 消</el-button>
				<el-button type="primary" @click="confirm1()">确 定</el-button>
			</div>
		</el-dialog>

相关JS代码如下：

import request from '@/utils/request'
export default {
	data() {
		return {
			poHtmlCode: '',
			dialogFormVisible1: false,
			form1: {
				name: '',
				gender: '',
				age: 18,
				nationality: '',
				documentType: '',
				documentNumber: '',
				reason: ''
			},
			rules1: {
				name: [
					{ required: true, message: '请输入姓名', trigger: 'blur' }
				]
			},
			formLabelWidth: '120px',
		}
	},
	created: function () {
		// 请求后端打开文件
		this.openFile().then(response => {
			this.poHtmlCode = response;
		});
	},
	methods: {
		OnPageOfficeCtrlInit() {
			// PageOffice的初始化事件回调函数，您可以在这里添加自定义按钮
			pageofficectrl.AddCustomToolButton("保存", "Save", 1);
			pageofficectrl.AddCustomToolButton("填写个税申请表", "openDialog1()", 0);
		},
		openFile() {
			return request({
				url: '/ApplicationForm/Word',
				method: 'get',
			})
		},
		Save() {
			pageofficectrl.WebSave();
		},
		openDialog1() {
			pageofficectrl.Enabled = false;
			this.dialogFormVisible1 = true;
		},
		cacel1() {
			pageofficectrl.Enabled = true;
			this.dialogFormVisible1 = false;
		},
		closeDialog(){
            pageofficectrl.Enabled = true;
		},
		confirm1() {
			pageofficectrl.Enabled = true;
			this.dialogFormVisible1 = false;
			//将form表单的值回填到word中
			pageofficectrl.word.SetValueToDataRegion('PO_PersonName', this.form1.name);
			if ('男' == this.form1.gender) {
				pageofficectrl.word.SetValueToDataRegion('PO_PersonGender', '☑男 □女');
			} else {
				pageofficectrl.word.SetValueToDataRegion('PO_PersonGender', '□男 ☑女');
			}
			pageofficectrl.word.SetValueToDataRegion('PO_PersonAge', this.form1.age.toString());
			pageofficectrl.word.SetValueToDataRegion('PO_PersonNation', this.form1.nationality);
			pageofficectrl.word.SetValueToDataRegion('PO_PersonIDType', this.form1.documentType);
			pageofficectrl.word.SetValueToDataRegion('PO_PersonID', this.form1.documentNumber);
			pageofficectrl.word.SetValueToDataRegion('PO_PersonReason', this.form1.reason);
		},
	},
	mounted: function () {
		//将当前页面methods中定义的函数挂载到PageOffice控件，例如控件触发的事件、自定义按钮触发的函数。
		window.POPageMounted = this;//此行必须
	}
}

参考链接：用前端框架内置对话框在Word中填空填表

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2373627.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

RabbitMQ-高级特性1

RabbitMQ-高级特性1

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言消息确认机制介绍手动确认方法代码前言代码编写消息确认机制的演示自动确认automanual 持久化介绍交换机持久化队列持久化消息持久化 持久化代码持久化代码演示…
阅读更多...
青藏高原东北部祁连山地区250m分辨率多年冻土空间分带指数图（2023）

青藏高原东北部祁连山地区250m分辨率多年冻土空间分带指数图（2023）

时间分辨率&#xff1a;10年 < x < 100年空间分辨率&#xff1a;100m - 1km共享方式&#xff1a;开放获取数据大小&#xff1a;24.38 MB数据时间范围&#xff1a;近50年来元数据更新时间&#xff1a;2023-10-08 数据集摘要 多年冻土目前正在经历大规模的退化&#xff0c…
阅读更多...
论文分享➲ arXiv2025 | TTRL: Test-Time Reinforcement Learning

论文分享➲ arXiv2025 | TTRL: Test-Time Reinforcement Learning

TTRL: Test-Time Reinforcement Learning TTRL&#xff1a;测试时强化学习 https://github.com/PRIME-RL/TTRL &#x1f4d6;导读&#xff1a;本篇博客有&#x1f9a5;精读版、&#x1f407;速读版及&#x1f914;思考三部分&#xff1b;精读版是全文的翻译&#xff0c;篇幅较…
阅读更多...
【计算机网络-传输层】传输层协议-TCP核心机制与可靠性保障

【计算机网络-传输层】传输层协议-TCP核心机制与可靠性保障

&#x1f4da; 博主的专栏 &#x1f427; Linux | &#x1f5a5;️ C | &#x1f4ca; 数据结构 | &#x1f4a1;C 算法 | &#x1f152; C 语言 | &#x1f310; 计算机网络 上篇文章&#xff1a;传输层协议-UDP 下篇文章&#xff1a; 网络层 我们的讲解顺序是&…
阅读更多...
项目管理从专家到小白

项目管理从专家到小白

敏捷开发 Scrum 符合敏捷开发原则的一种典型且在全球使用最为广泛的框架。 三个角色 产品负责人Product Ower&#xff1a;专注于了解业务、客户和市场要求&#xff0c;然后相应地确定工程团队需要完成的工作的优先顺序。 敏捷教练Scrum Master&#xff1a;确保 Scrum 流程顺…
阅读更多...
InnoDB结构与表空间文件页的详解

InnoDB结构与表空间文件页的详解

目录 1.InnoDB的概览 表空间文件在哪里&#xff1f; 为什么要设计成内存结构和磁盘结构&#xff1f; 表空间与表空间文件关系&#xff1f; 用户数据如何在表空间文件存储&#xff1f; 2.页 如何设置页的大小&#xff1f; 页的结构及在表空间的位置&#xff1f; 页头包…
阅读更多...
世界无人机大会将至，大势智慧以“AI+实景三维”赋能低空经济

世界无人机大会将至，大势智慧以“AI+实景三维”赋能低空经济

近日&#xff0c;“2025第九届世界无人机大会暨国际低空经济与无人系统博览会和第十届深圳国际无人机展览会”组委会召开新闻发布会&#xff0c;宣布本届大会主题为“步入低空经济新时代”&#xff0c;将于5月23-25日在深圳会展中心&#xff08;福田&#xff09;举行&#xff0…
阅读更多...
AI 驱动数据库交互技术路线详解：角色、提示词工程与输入输出分析

AI 驱动数据库交互技术路线详解：角色、提示词工程与输入输出分析

引言 在人工智能与数据库深度融合的趋势下&#xff0c;理解AI在数据库交互流程中的具体角色、提示词工程的运用以及各步骤的输入输出情况&#xff0c;对于把握这一先进技术路线至关重要。本文将对其展开详细剖析。 一、AI 在数据库交互流程中的角色 &#xff08;一&#xff0…
阅读更多...
stm32错误记录

stm32错误记录

1.使用LCD屏幕时&#xff0c;只用st-link时&#xff0c;亮度很暗&#xff0c;需要用usb数据线额外给屏幕供电&#xff1b; 2.移植freertos到f103c8t6芯片时&#xff0c;工程没有错误&#xff0c;但单片机没有反应&#xff1b; 需要将堆的大小改成10*1024&#xff1b; 3.在找已经…
阅读更多...
一个电平转换电路导致MCU/FPGA通讯波形失真的原因分析

一个电平转换电路导致MCU/FPGA通讯波形失真的原因分析

文章目录 前言一、问题描述二、原因分析三、 仿真分析四、 尝试的解决方案总结前言 一、问题描述 一个电平转换电路，800kHz的通讯速率上不去，波形失真，需要分析具体原因。输出波形如下,1码(占空比75%)低于5V，0码(占空比25%)低于4V。，严重失真。 电平转换电路很简单，M…
阅读更多...
OpenLayers根据任意数量控制点绘制贝塞尔曲线

OpenLayers根据任意数量控制点绘制贝塞尔曲线

以下是使用OpenLayers根据任意数量控制点绘制贝塞尔曲线的完整实现方案。该方案支持三个及以上控制点&#xff0c;使用递归算法计算高阶贝塞尔曲线。 实现思路 贝塞尔曲线原理&#xff1a;使用德卡斯特里奥算法&#xff08;De Casteljau’s Algorithm&#xff09;递归计算任意…
阅读更多...
STM32--RCC--时钟

STM32--RCC--时钟

教程 系统时钟 RCC RCC&#xff08;Reset and Clock Control&#xff09;是STM32微控制器中管理时钟和复位系统的关键外设模块&#xff0c;负责整个芯片的时钟树配置和复位控制。 RCC主要功能 时钟系统管理&#xff1a; 内部/外部时钟源选择 时钟分频/倍频配置 各外设时钟门…
阅读更多...
仿腾讯会议——创建房间加入房间

仿腾讯会议——创建房间加入房间

等等
阅读更多...
Linux系统入门第十二章 --Shell编程之正则表达式

Linux系统入门第十二章 --Shell编程之正则表达式

一、正则表达式 之前学习了 Shell 脚本的基础用法&#xff0c;已经可以利用条件判断、循环等语句编辑 Shell脚本。接下来我们将开始介绍一个很重要的概念-正则表达式(RegularExpression&#xff0c;RE) 1.正则表达式的定义 正则表达式又称正规表达式、常规表达式。在代码中常…
阅读更多...
[架构之美]Spring Boot多环境5种方案实现Dev/Test/Prod环境隔离

[架构之美]Spring Boot多环境5种方案实现Dev/Test/Prod环境隔离

[架构之美]Spring Boot多环境5种方案实现Dev/Test/Prod环境隔离&#xff08;十六&#xff09; 摘要&#xff1a;本文深入剖析Spring Boot多环境配置的5种实现方案&#xff0c;涵盖YAML分组配置、Maven Profile集成、Kubernetes适配等企业级实践&#xff0c;并附赠配置加密方案…
阅读更多...
C++STL——stack,queue

C++STL——stack,queue

stack与queue 前言容器适配器deque 前言 本篇主要讲解stack与queue的底层&#xff0c;但并不会进行实现&#xff0c;stack的接口 queue的接口 &#xff0c;关于stack与queue的接口在这里不做讲解&#xff0c;因为通过前面的对STL的学习&#xff0c;这些接口都是大同小异的。 …
阅读更多...
解决社区录音应用横屏状态下,录音后无法播放的bug

解决社区录音应用横屏状态下,录音后无法播放的bug

最近看到社区有小伙伴反映&#xff0c;社区录音应用横屏时&#xff0c;录音后无法播放的问题。现分享解决办法。 社区录音应用的来源&#xff1a;https://gitee.com/openharmony/applications_app_samples/tree/OpenHarmony-5.0.2-Release/code/SystemFeature/Media/Recorder …
阅读更多...
专业级软件卸载工具：免费使用，彻底卸载无残留！

专业级软件卸载工具：免费使用，彻底卸载无残留！

在数字生活节奏日益加快的今天&#xff0c;我们的电脑就像每天都在"吃进"各种软件。但您是否注意到&#xff0c;那些看似消失的程序其实悄悄留下了大量冗余文件&#xff1f;就像厨房角落里积攒的调味瓶空罐&#xff0c;日积月累就会让系统变得"消化不良"。…
阅读更多...
JVM对象创建内存分配

JVM对象创建内存分配

对象创建的主要流程&#xff1a; 检查加载类–》分配内存–》初始化–》设置对象头–》实例化&#xff0c;执行init方法。 在内存分配中&#xff0c;虚拟机将为新生对象内存分配 Minor GC : 新生代垃圾收集&#xff0c;特点是频繁&#xff0c;回收速度快&#xff1b; Full GC …
阅读更多...
PySide6 GUI 学习笔记——常用类及控件使用方法（常用类边距QMarginsF）

PySide6 GUI 学习笔记——常用类及控件使用方法（常用类边距QMarginsF）

文章目录 类简介方法总览关键说明示例代码 类简介 QMarginsF 用于定义四个浮点型边距&#xff08;左、上、右、下&#xff09;&#xff0c;描述围绕矩形的边框尺寸。所有边距接近零时 isNull() 返回 True&#xff0c;支持运算符重载和数学运算。 方法总览 方法名/运算符参数返…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023