在实际的Word文档开发中，经常需要自动填充数据到Word模板中，以生成动态的Word文档，那么应该如何编辑制作Word模板呢？
# 方法一：直接打开Word文件插入书签

假如使用数据区域（DataRegion）来定义模板中动态填充数据的位置，那么直接打开一个Word文件，在其中添加“PO_”开头的书签即可制作word模板。例如，打开一个Word文件后，可以通过选中需要标记为书签的文字，例如“[姓名]”，然后点击Word菜单中的“插入”-“书签”来添加书签，在弹出的“书签”对话框中，输入新书签的名称PO_userName，并点击右侧的“添加”按钮，即可完成一个数据区域的定义。效果如下图所示：
![image](https://developer.qcloudimg.com/http-save/yehe-12004816/b49905bd9be7fc6dc073ed767aacd527.png)
注意
书签名必须以“PO_”开头，并由字母和数字组成，但中间不能有空格。
Word模板中需要多少个动态填充数据的位置，就在Word文件中相应的位置插入多少个“PO_”开头的书签即可，这种制作word模板的方法操作简单，但是常常用于新项目开发中开发人员定义Word模板。开发人员知道在Word模板的哪个位置要插入哪个数据，就比如上面所说的“姓名”的位置需要插入系统里的数据UserName，所以就定义了一个PO_userName的书签，然后就可以编程调用PageOffice接口，把web系统里的UserName赋值给数据区域PO_userName，其他的数据区域也是相同的处理方式。但是项目发布后用户需求变动，希望修改Word模板或创建新的Word模板，用户怎么知道如何制作word模板呢？如何插入书签？如何命名书签？哪些名字的书签与哪些系统数据是对应的呢？
# 方法二：给用户提供自定义模板功能

开发人员可以给系统增加一个模板管理的模块，拥有模板管理权限的用户可以查看系统中的模板列表，可以新增、删除和在线编辑模板，开发人员通过程序定义好编辑某种模板时可能用到的所有数据区域，用户自定义编辑Word模板时可以把全部数据区域插入到模板的相应位置，也可以根据实际需求只使用部分数据区域，但Word模板中数据区域的数量总是开发人员定义的数据区域集合的子集，这样一来就能实现开发人员与用户的分工合作。
比如说web系统中合同模板的制作，合同模板中可能会用到的数据有：合同编号、购货单位、供货单位、产品名称、购货单位地址、供货单位地址、担保人、担保人手机，那么开发人员可以编写代码定义好这些数据区域，让用户在线打开编辑模板时，只能在Word模板中插入这些系统定义好的数据区域，这样做不但实现了开发人员与用户的一种约定，而且规范了用户的操作。
1. **开发人员编写代码定义好编辑模板时所有可用的数据区域：**
开发人员调用PageOffice提供的defineDataRegion方法定义用户编辑模板时所有可用的数据区域，第一个参数是数据区域名称，也就是word书签的名称，第二个参数是数据区域在Word文件中显示的文字内容，格式没有特殊要求。下面示例代码中显示的文字内容都使用了中括号（也可以使用其他符号），仅仅是为了便于用户直观的查看Word模板中哪些位置是插入的数据区域。
```
WordDocumentWriter doc = new WordDocumentWriter();
doc.getTemplate().defineDataRegion("PO_Guarantor", "[担保人]");
doc.getTemplate().defineDataRegion("PO_SupplierAddress", "[供货单位地址]");
doc.getTemplate().defineDataRegion("PO_BuyerAddress", "[购货单位地址]");
doc.getTemplate().defineDataRegion("PO_No", "[合同编号]");
doc.getTemplate().defineDataRegion("PO_GuarantorPhone", "[担保人手机]");
doc.getTemplate().defineDataRegion("PO_ProductName", "[产品名称]");
doc.getTemplate().defineDataRegion("PO_Buyer", "[购货单位]");
doc.getTemplate().defineDataRegion("PO_Supplier", "[供货单位]");
```
2. **用户编辑模板时，直接使用开发人员定义好的数据区域来制作模板：**

开发人员可以根据实际需求，在自己的Web项目中实现下面的编辑模板效果。
把数据区域列表和Word文件编辑界面，一左一右放到同一个页面窗口中，用户在右侧Word文件中点击定位光标到需要插入数据的位置，然后在左侧选择相应的数据区域，添加到当前位置即可。比如下图所示：在Word中需要插入“合同编号”的位置点击一下鼠标，然后在左侧“待添加区域”中点击数据区域“PO_No”的添加按钮，数据区域“PO_No”就被插入到了Word光标所在位置，且“待添加区域”列表中的数据区域“PO_No”被移动到“已添加区域”的列表中。 ![image](https://developer.qcloudimg.com/http-save/yehe-12004816/a6521791864125bd7450e806b17bc5ef.png)
此效果所用到的html、css和javascript代码：

```
<style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
        }
		div{
			 box-sizing: border-box; 
		}
        #left-container {
            width: 360px;
            display: flex;
            flex-direction: column;
            border-right: 2px solid #ccc;
            padding: 20px;
            overflow: auto;
            font-size: 12px;
            height: 90vh;
        }
        #right-container {
            flex: 1;
            padding: 0px;
            height: 95vh;
        }
        #podiv{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #left-title{
            text-align: center;
            font-size: 16px;
            padding-bottom: 10px;
            margin-bottom: 10px;
            border-bottom: solid 1px #ccc;
        }

        .input-group {
            margin-bottom: 20px;
            display: flex;
            align-items: center;
        }
        input[type="text"] {
            width: 70%;
            padding: 10px;
            margin-top: 5px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 12px;
            outline: none;
        }

        input[type="submit"] {
            width: 80px;
            padding: 10px;
            margin-top: 5px;
            margin-left: 10px;
            box-sizing: border-box;
            border: none;
            border-radius: 5px;
            background-color: #4E6EF2;
            color: white;
            font-size: 12px;
            outline: none;
            cursor: pointer;
        }
        /* 表格样式 */
        table {
            border-collapse: collapse;
            width: 100%;
        }

        th, td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        th {
            position: sticky;
            top: 0;
            background-color: #f2f2f2;
            z-index: 1;
        }

        /* 容器样式 */
        .container {
            height: 300px;
            overflow: auto;
            border: solid 1px #ccc;
            scrollbar-width: thin;
            scrollbar-color: #888 #f2f2f2;
        }

        /* 滚动条样式 */
        .container::-webkit-scrollbar {
            width: 8px;
        }

        .container::-webkit-scrollbar-track {
            background: #f2f2f2;
        }

        .container::-webkit-scrollbar-thumb {
            background-color: #888;
            border-radius: 4px;
        }

        .container::-webkit-scrollbar-thumb:hover {
            background-color: #555;
        }
        .delete-button {
            padding: 6px 6px;
            border: none;
            border-radius: 5px;
            background-color: #f44336;
            color: white;
            font-size: 12px;
            cursor: pointer;
        }
        .delete-button:hover {
            background-color: #d32f2f;
        }

        .normal-button {
            padding: 6px 6px;
            border: none;
            border-radius: 5px;
            background-color: #4E7EFF;
            color: white;
            font-size: 12px;
            cursor: pointer;
        }
        .normal-button:hover {
            background-color: #4E6EF2;
        }

        .locate-button {
            padding: 6px 6px;
            border: none;
            border-radius: 5px;
            background-color: #0abb87;
            color: white;
            font-size: 12px;
            cursor: pointer;
        }
        .locate-button:hover {
            background-color: #0a9966;
        }
    </style>

    <script type="text/javascript">
        //控件中的一些常用方法都在这里调用，比如保存，打印等等
        function OnPageOfficeCtrlInit() {
            pageofficectrl.AddCustomToolButton("保存", "Save", 1);
        }
        function Save() {
            pageofficectrl.WebSave();
        }
        //加载数据
        function loadData() {
            var kWord1 = document.getElementById("inputKey1").value;
            var kWord2 = document.getElementById("inputKey2").value;

            var definedDataRegionJson = pageofficectrl.word.DataRegionsDefinedAsJson;
            var dataRegionJson = pageofficectrl.word.DataRegionsAsJson;
            searchDataRegion(definedDataRegionJson, dataRegionJson, kWord1);
            searchDataRegion2(dataRegionJson, kWord2);
        }

        //加载上方数据列表
        function searchDataRegion(drDefinedJson, drJson, s){
            var tb1 = document.getElementById("bkmkTable");
            var rCount = tb1.rows.length;
            for (var i = 1; i < rCount; i++) {
                tb1.deleteRow(1);
            }

            if('' == drDefinedJson) drDefinedJson = '[]';
            let definedDataRegionObj = JSON.parse(drDefinedJson);
            let dataRegionsJson = drJson;
            if('' == dataRegionsJson) dataRegionsJson = '[]';
            let dataRegionsObj = JSON.parse(dataRegionsJson);

            var oTable = document.getElementById("bkmkTable");
            var tbodyObj = oTable.tBodies[0];
            for(let key in definedDataRegionObj ){
                let drName = definedDataRegionObj[key].name;
                let drCaption =  definedDataRegionObj[key].caption;
                //alert("数据区域："+drName+"; 值："+drValue);

                let bFind = false;
                for(let k in dataRegionsObj){
                    if(dataRegionsObj[k].name == drName){
                        bFind = true;
                        break;
                    }
                }

                if(bFind) continue;

                if (drName.toLocaleLowerCase().indexOf(s.toLocaleLowerCase()) > -1) {
                    var oTr = tbodyObj.insertRow();
                    var oTd = oTr.insertCell();
                    oTd.innerHTML = drName;
                    oTd = oTr.insertCell();
                    oTd.innerHTML = drCaption;
                    oTd = oTr.insertCell();
                    oTd.innerHTML = '<button class="normal-button" onclick="addDataRegion(\''+drName+'\',\''+drCaption+'\');loadData();">添加</button>';
                }
            }
        }

        //加载下方数据列表
        function searchDataRegion2(drJson, s) {
            //删除所有行
            var tb1 = document.getElementById("bkmkTable2");
            var rCount = tb1.rows.length;
            for (var i = 1; i < rCount; i++) {
                tb1.deleteRow(1);
            }

            let dataRegionsJson = drJson;
            if('' == dataRegionsJson) dataRegionsJson = '[]';
            let dataRegionsObj = JSON.parse(dataRegionsJson);
            var oTable = document.getElementById("bkmkTable2");
            var tbodyObj = oTable.tBodies[0];
            for(let key in dataRegionsObj ){
                let drName = dataRegionsObj[key].name;

                if (drName.toLocaleLowerCase().indexOf(s.toLocaleLowerCase()) > -1) {
                    var oTr = tbodyObj.insertRow();
                    var oTd = oTr.insertCell();
                    oTd.innerHTML = drName;
                    oTd = oTr.insertCell();
                    oTd.innerHTML = '<button class="delete-button" onclick="deleteDataRegion(\''+ drName +'\');loadData();">删除</button> <button class="locate-button" onclick="locateDataRegion(\''+ drName +'\');">定位</button>';
                }
            }

        }

        function locateDataRegion(drName) {
            pageofficectrl.word.LocateDataRegion(drName);
        }

        function deleteDataRegion(drName){
            pageofficectrl.word.DeleteDataRegion(drName);
        }

        function addDataRegion(drName, drValue){
            pageofficectrl.word.AddDataRegion(drName, drValue);
        }

        function AfterDocumentOpened() {
            loadData();
        }
    </script>

<div id="left-container">
    <div id="left-title">定义数据区域</div>
    <div class="input-group">
        <span style="font-size: 14px;">待添加区域：</span><input type="text" id="inputKey1" oninput="loadData();" placeholder="请输入数据区域关键字搜索">
    </div>
    <div class="container">
        <table id="bkmkTable">
            <thead>
            <tr>
                <th>数据区域</th>
                <th>显示文字</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            
            </tbody>
        </table>
    </div>
    <div class="input-group" style="margin-top: 20px">
        <span style="font-size: 14px;">已添加区域：</span><input type="text" id="inputKey2" oninput="loadData();" placeholder="请输入数据区域关键字搜索">
    </div>
    <div class="container">
        <table id="bkmkTable2">
            <thead>
            <tr>
                <th>数据区域</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            
            </tbody>
        </table>
    </div>
</div>    
```
在最终需要动态填充数据到word模板中生成正式合同文件时，开发人员只管编写代码给所有的数据区域赋值即可，无需关心用户自定义的word模板中到底使用了哪些数据区域，因为那些没有使用的数据区域会被PageOffice自动忽略掉；而最终用户也可以根据自己的实际需要定义好word模板中各项数据及其位置，无需关心数据从哪里来，也不用事事都与开发人员沟通，当业务需求发生简单的变化时，可以自主修改word模板来满足新的需求。这样一来，不管是用户还是开发人员，都在一定程度上从这种纷杂多变的业务需求中解脱出来。

参考链接：[用户自定义模板中数据区域 | PageOffice 开发者中心](https://pageoffice.cn/pages/0d4f98/)

在实际的Word文档开发中，经常需要自动填充数据到Word模板中，以生成动态的Word文档，那么应该如何编辑制作Word模板呢？

PageOffice 自定义模板中数据区域

操作系统

学习Word模板制作技巧，掌握两种高效方法：直接插入"PO_"前缀书签或通过系统自定义模板功能。开发人员可定义数据区域，用户灵活编辑模板，实现合同等文档自动化生成，提升工作效率。

容器

JSON

热销域名限时优惠，新客首年免费！


domain

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

PageOffice 自定义模板中数据区域-腾讯云开发者社区-腾讯云

PageOffice 自定义模板中数据区域

PageOffice 自定义模板中数据区域

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐