AI专业者开发社区 5 号成员
  •  0 回帖  •  7 浏览  •  3 个月前
 

国产linux系统（银河麒麟，统信uos）使用 PageOffice 国产版在线打开 word文件自定义模板中数据区域

PageOffice 国产版 ：支持信创系统，支持银河麒麟 V10 和统信 UOS，支持 X86（intel、兆芯、海光等）、ARM（飞腾、鲲鹏、麒麟等）芯片架构。

本示例关键代码的编写位置
Vue+Springboot

注意
本文中展示的代码均为关键代码，复制粘贴到您的项目中，按照实际的情况，例如文档路径，用户名等做适当修改即可使用。

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

方法一：直接打开 Word 文件插入书签

假如使用数据区域（DataRegion）来定义模板中动态填充数据的位置，那么直接打开一个 Word 文件，在其中添加“PO_”开头的书签即可制作 word 模板。例如，打开一个 Word 文件后，可以通过选中需要标记为书签的文字，例如“[姓名]”，然后点击 Word 菜单中的“插入”-“书签”来添加书签，在弹出的“书签”对话框中，输入新书签的名称 PO_userName，并点击右侧的“添加”按钮，即可完成一个数据区域的定义。效果如下图所示：
image

注意
书签名必须以“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 模板中哪些位置是插入的数据区域。
WordDocument doc = new WordDocument();
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", "[供货单位]");
  1. 用户编辑模板时，直接使用开发人员定义好的数据区域来制作模板：
    由于用户操作习惯和 Web 系统界面风格的不同，开发人员可以根据实际需求在自己的 Web 项目中选择实现下面的一种编辑模板效果。

用户在线编辑模板效果 1： 把数据区域列表和 Word 文件编辑界面，一左一右放到同一个页面窗口中，用户在右侧 Word 文件中点击定位光标到需要插入数据的位置，然后在左侧选择相应的数据区域，添加到当前位置即可。比如下图所示：在 Word 中需要插入“合同编号”的位置点击一下鼠标，然后在左侧“待添加区域”中点击数据区域“PO_No”的添加按钮，数据区域“PO_No”就被插入到了 Word 光标所在位置，且“待添加区域”列表中的数据区域“PO_No”被移动到“已添加区域”的列表中。
image

此效果所用到的 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;
        }

    <span class="hljs-selector-class">.input-group</span> {
        <span class="hljs-attribute">margin-bottom</span>: <span class="hljs-number">20px</span>;
        <span class="hljs-attribute">display</span>: flex;
        <span class="hljs-attribute">align-items</span>: center;
    }
    <span class="hljs-selector-tag">input</span><span class="hljs-selector-attr">[type=<span class="hljs-string">"text"</span>]</span> {
        <span class="hljs-attribute">width</span>: <span class="hljs-number">70%</span>;
        <span class="hljs-attribute">padding</span>: <span class="hljs-number">10px</span>;
        <span class="hljs-attribute">margin-top</span>: <span class="hljs-number">5px</span>;
        <span class="hljs-attribute">box-sizing</span>: border-box;
        <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid <span class="hljs-number">#ccc</span>;
        <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">5px</span>;
        <span class="hljs-attribute">font-size</span>: <span class="hljs-number">12px</span>;
        <span class="hljs-attribute">outline</span>: none;
    }

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

    <span class="hljs-selector-tag">th</span>, <span class="hljs-selector-tag">td</span> {
        <span class="hljs-attribute">padding</span>: <span class="hljs-number">8px</span>;
        <span class="hljs-attribute">text-align</span>: left;
        <span class="hljs-attribute">border-bottom</span>: <span class="hljs-number">1px</span> solid <span class="hljs-number">#ddd</span>;
    }

    <span class="hljs-selector-tag">th</span> {
        <span class="hljs-attribute">position</span>: sticky;
        <span class="hljs-attribute">top</span>: <span class="hljs-number">0</span>;
        <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#f2f2f2</span>;
        <span class="hljs-attribute">z-index</span>: <span class="hljs-number">1</span>;
    }

    <span class="hljs-comment">/* 容器样式 */</span>
    <span class="hljs-selector-class">.container</span> {
        <span class="hljs-attribute">height</span>: <span class="hljs-number">300px</span>;
        <span class="hljs-attribute">overflow</span>: auto;
        <span class="hljs-attribute">border</span>: solid <span class="hljs-number">1px</span> <span class="hljs-number">#ccc</span>;
        scrollbar-<span class="hljs-attribute">width</span>: thin;
        scrollbar-<span class="hljs-attribute">color</span>: <span class="hljs-number">#888</span> <span class="hljs-number">#f2f2f2</span>;
    }

    <span class="hljs-comment">/* 滚动条样式 */</span>
    <span class="hljs-selector-class">.container</span>::-webkit-scrollbar {
        <span class="hljs-attribute">width</span>: <span class="hljs-number">8px</span>;
    }

    <span class="hljs-selector-class">.container</span>::-webkit-scrollbar-track {
        <span class="hljs-attribute">background</span>: <span class="hljs-number">#f2f2f2</span>;
    }

    <span class="hljs-selector-class">.container</span>::-webkit-scrollbar-thumb {
        <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#888</span>;
        <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">4px</span>;
    }

    <span class="hljs-selector-class">.container</span>::-webkit-scrollbar-thumb:hover {
        <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#555</span>;
    }
    <span class="hljs-selector-class">.delete-button</span> {
        <span class="hljs-attribute">padding</span>: <span class="hljs-number">6px</span> <span class="hljs-number">6px</span>;
        <span class="hljs-attribute">border</span>: none;
        <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">5px</span>;
        <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#f44336</span>;
        <span class="hljs-attribute">color</span>: white;
        <span class="hljs-attribute">font-size</span>: <span class="hljs-number">12px</span>;
        <span class="hljs-attribute">cursor</span>: pointer;
    }
    <span class="hljs-selector-class">.delete-button</span><span class="hljs-selector-pseudo">:hover</span> {
        <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#d32f2f</span>;
    }

    <span class="hljs-selector-class">.normal-button</span> {
        <span class="hljs-attribute">padding</span>: <span class="hljs-number">6px</span> <span class="hljs-number">6px</span>;
        <span class="hljs-attribute">border</span>: none;
        <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">5px</span>;
        <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#4E7EFF</span>;
        <span class="hljs-attribute">color</span>: white;
        <span class="hljs-attribute">font-size</span>: <span class="hljs-number">12px</span>;
        <span class="hljs-attribute">cursor</span>: pointer;
    }
    <span class="hljs-selector-class">.normal-button</span><span class="hljs-selector-pseudo">:hover</span> {
        <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#4E6EF2</span>;
    }

    <span class="hljs-selector-class">.locate-button</span> {
        <span class="hljs-attribute">padding</span>: <span class="hljs-number">6px</span> <span class="hljs-number">6px</span>;
        <span class="hljs-attribute">border</span>: none;
        <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">5px</span>;
        <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#0abb87</span>;
        <span class="hljs-attribute">color</span>: white;
        <span class="hljs-attribute">font-size</span>: <span class="hljs-number">12px</span>;
        <span class="hljs-attribute">cursor</span>: pointer;
    }
    <span class="hljs-selector-class">.locate-button</span><span class="hljs-selector-pseudo">:hover</span> {
        <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#0a9966</span>;
    }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span>&gt;</span><span class="language-javascript">
    <span class="hljs-comment">//控件中的一些常用方法都在这里调用，比如保存，打印等等</span>
    <span class="hljs-keyword">function</span> <span class="hljs-title function_">OnPageOfficeCtrlInit</span>(<span class="hljs-params"></span>) {
        pageofficectrl.<span class="hljs-title class_">AddCustomToolButton</span>(<span class="hljs-string">"保存"</span>, <span class="hljs-string">"Save"</span>, <span class="hljs-number">1</span>);
    }
    <span class="hljs-keyword">function</span> <span class="hljs-title function_">Save</span>(<span class="hljs-params"></span>) {
        pageofficectrl.<span class="hljs-title class_">WebSave</span>();
    }
    <span class="hljs-comment">//加载数据</span>
    <span class="hljs-keyword">function</span> <span class="hljs-title function_">loadData</span>(<span class="hljs-params"></span>) {
        <span class="hljs-keyword">var</span> kWord1 = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">"inputKey1"</span>).<span class="hljs-property">value</span>;
        <span class="hljs-keyword">var</span> kWord2 = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">"inputKey2"</span>).<span class="hljs-property">value</span>;

        <span class="hljs-keyword">var</span> definedDataRegionJson = pageofficectrl.<span class="hljs-property">word</span>.<span class="hljs-property">DataRegionsDefinedAsJson</span>;
        <span class="hljs-keyword">var</span> dataRegionJson = pageofficectrl.<span class="hljs-property">word</span>.<span class="hljs-property">DataRegionsAsJson</span>;
        <span class="hljs-title function_">searchDataRegion</span>(definedDataRegionJson, dataRegionJson, kWord1);
        <span class="hljs-title function_">searchDataRegion2</span>(dataRegionJson, kWord2);
    }

    <span class="hljs-comment">//加载上方数据列表</span>
    <span class="hljs-keyword">function</span> <span class="hljs-title function_">searchDataRegion</span>(<span class="hljs-params">drDefinedJson, drJson, s</span>){
        <span class="hljs-keyword">var</span> tb1 = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">"bkmkTable"</span>);
        <span class="hljs-keyword">var</span> rCount = tb1.<span class="hljs-property">rows</span>.<span class="hljs-property">length</span>;
        <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">1</span>; i &lt; rCount; i++) {
            tb1.<span class="hljs-title function_">deleteRow</span>(<span class="hljs-number">1</span>);
        }

        <span class="hljs-keyword">if</span>(<span class="hljs-string">''</span> == drDefinedJson) drDefinedJson = <span class="hljs-string">'[]'</span>;
        <span class="hljs-keyword">let</span> definedDataRegionObj = <span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">parse</span>(drDefinedJson);
        <span class="hljs-keyword">let</span> dataRegionsJson = drJson;
        <span class="hljs-keyword">if</span>(<span class="hljs-string">''</span> == dataRegionsJson) dataRegionsJson = <span class="hljs-string">'[]'</span>;
        <span class="hljs-keyword">let</span> dataRegionsObj = <span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">parse</span>(dataRegionsJson);

        <span class="hljs-keyword">var</span> oTable = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">"bkmkTable"</span>);
        <span class="hljs-keyword">var</span> tbodyObj = oTable.<span class="hljs-property">tBodies</span>[<span class="hljs-number">0</span>];
        <span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> key <span class="hljs-keyword">in</span> definedDataRegionObj ){
            <span class="hljs-keyword">let</span> drName = definedDataRegionObj[key].<span class="hljs-property">name</span>;
            <span class="hljs-keyword">let</span> drCaption =  definedDataRegionObj[key].<span class="hljs-property">caption</span>;
            <span class="hljs-comment">//alert("数据区域："+drName+"; 值："+drValue);</span>

            <span class="hljs-keyword">let</span> bFind = <span class="hljs-literal">false</span>;
            <span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> k <span class="hljs-keyword">in</span> dataRegionsObj){
                <span class="hljs-keyword">if</span>(dataRegionsObj[k].<span class="hljs-property">name</span> == drName){
                    bFind = <span class="hljs-literal">true</span>;
                    <span class="hljs-keyword">break</span>;
                }
            }

            <span class="hljs-keyword">if</span>(bFind) <span class="hljs-keyword">continue</span>;

            <span class="hljs-keyword">if</span> (drName.<span class="hljs-title function_">toLocaleLowerCase</span>().<span class="hljs-title function_">indexOf</span>(s.<span class="hljs-title function_">toLocaleLowerCase</span>()) &gt; -<span class="hljs-number">1</span>) {
                <span class="hljs-keyword">var</span> oTr = tbodyObj.<span class="hljs-title function_">insertRow</span>();
                <span class="hljs-keyword">var</span> oTd = oTr.<span class="hljs-title function_">insertCell</span>();
                oTd.<span class="hljs-property">innerHTML</span> = drName;
                oTd = oTr.<span class="hljs-title function_">insertCell</span>();
                oTd.<span class="hljs-property">innerHTML</span> = drCaption;
                oTd = oTr.<span class="hljs-title function_">insertCell</span>();
                oTd.<span class="hljs-property">innerHTML</span> = <span class="hljs-string">'&lt;button class="normal-button" onclick="addDataRegion(\''</span>+drName+<span class="hljs-string">'\',\''</span>+drCaption+<span class="hljs-string">'\');loadData();"&gt;添加&lt;/button&gt;'</span>;
            }
        }
    }

    <span class="hljs-comment">//加载下方数据列表</span>
    <span class="hljs-keyword">function</span> <span class="hljs-title function_">searchDataRegion2</span>(<span class="hljs-params">drJson, s</span>) {
        <span class="hljs-comment">//删除所有行</span>
        <span class="hljs-keyword">var</span> tb1 = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">"bkmkTable2"</span>);
        <span class="hljs-keyword">var</span> rCount = tb1.<span class="hljs-property">rows</span>.<span class="hljs-property">length</span>;
        <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">1</span>; i &lt; rCount; i++) {
            tb1.<span class="hljs-title function_">deleteRow</span>(<span class="hljs-number">1</span>);
        }

        <span class="hljs-keyword">let</span> dataRegionsJson = drJson;
        <span class="hljs-keyword">if</span>(<span class="hljs-string">''</span> == dataRegionsJson) dataRegionsJson = <span class="hljs-string">'[]'</span>;
        <span class="hljs-keyword">let</span> dataRegionsObj = <span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">parse</span>(dataRegionsJson);
        <span class="hljs-keyword">var</span> oTable = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">"bkmkTable2"</span>);
        <span class="hljs-keyword">var</span> tbodyObj = oTable.<span class="hljs-property">tBodies</span>[<span class="hljs-number">0</span>];
        <span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> key <span class="hljs-keyword">in</span> dataRegionsObj ){
            <span class="hljs-keyword">let</span> drName = dataRegionsObj[key].<span class="hljs-property">name</span>;

            <span class="hljs-keyword">if</span> (drName.<span class="hljs-title function_">toLocaleLowerCase</span>().<span class="hljs-title function_">indexOf</span>(s.<span class="hljs-title function_">toLocaleLowerCase</span>()) &gt; -<span class="hljs-number">1</span>) {
                <span class="hljs-keyword">var</span> oTr = tbodyObj.<span class="hljs-title function_">insertRow</span>();
                <span class="hljs-keyword">var</span> oTd = oTr.<span class="hljs-title function_">insertCell</span>();
                oTd.<span class="hljs-property">innerHTML</span> = drName;
                oTd = oTr.<span class="hljs-title function_">insertCell</span>();
                oTd.<span class="hljs-property">innerHTML</span> = <span class="hljs-string">'&lt;button class="delete-button" onclick="deleteDataRegion(\''</span>+ drName +<span class="hljs-string">'\');loadData();"&gt;删除&lt;/button&gt; &lt;button class="locate-button" onclick="locateDataRegion(\''</span>+ drName +<span class="hljs-string">'\');"&gt;定位&lt;/button&gt;'</span>;
            }
        }

    }

    <span class="hljs-keyword">function</span> <span class="hljs-title function_">locateDataRegion</span>(<span class="hljs-params">drName</span>) {
        pageofficectrl.<span class="hljs-property">word</span>.<span class="hljs-title class_">LocateDataRegion</span>(drName);
    }

    <span class="hljs-keyword">function</span> <span class="hljs-title function_">deleteDataRegion</span>(<span class="hljs-params">drName</span>){
        pageofficectrl.<span class="hljs-property">word</span>.<span class="hljs-title class_">DeleteDataRegion</span>(drName);
    }

    <span class="hljs-keyword">function</span> <span class="hljs-title function_">addDataRegion</span>(<span class="hljs-params">drName, drValue</span>){
        pageofficectrl.<span class="hljs-property">word</span>.<span class="hljs-title class_">AddDataRegion</span>(drName, drValue);
    }

    <span class="hljs-keyword">function</span> <span class="hljs-title function_">AfterDocumentOpened</span>(<span class="hljs-params"></span>) {
        <span class="hljs-title function_">loadData</span>();
    }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>



<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>

用户在线编辑模板效果 2： 编辑模板的界面只显示 Word 文件，添加数据区域时，弹出一个非模态的数据区域选择框，然后用户就可以在 Word 文件中点击定位光标到需要插入数据的位置，再点击数据区域选择框中未使用过的数据区域进行添加。比如下图所示：点击“定义数据区域”按钮，弹出数据区域选择框，然后定位光标到 Word 中需要插入“购货单位”的位置，然后在数据区域选择框左侧“待添加区域”中点击数据区域“PO_Buyer”的添加按钮，数据区域“PO_Buyer”就被插入到了 Word 光标所在位置，且“待添加区域”列表中的数据区域“PO_Buyer”被移动到“已添加区域”的列表中。
image

此效果所用到的数据区域选择框 DataRegionDlg.htm 的页面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定义数据区域</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            font-size:10px;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            background-color: #f5f5f5;
        }

    <span class="hljs-selector-class">.container</span> {
        <span class="hljs-attribute">display</span>: flex;
        <span class="hljs-attribute">width</span>: <span class="hljs-number">99%</span>;
        <span class="hljs-attribute">max-width</span>: <span class="hljs-number">100%</span>;
    }

    <span class="hljs-selector-class">.left</span>, <span class="hljs-selector-class">.right</span> {
        <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#fff</span>;
        <span class="hljs-attribute">padding</span>:<span class="hljs-number">0</span> <span class="hljs-number">10px</span>;
        <span class="hljs-attribute">box-shadow</span>: <span class="hljs-number">0</span> <span class="hljs-number">0</span> <span class="hljs-number">10px</span> <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0.1</span>);
    }
    <span class="hljs-selector-class">.left</span>{
        <span class="hljs-attribute">flex-grow</span>: <span class="hljs-number">7</span>;
    }
    <span class="hljs-selector-class">.right</span> {
        <span class="hljs-attribute">flex-grow</span>: <span class="hljs-number">3</span>;
    }

    <span class="hljs-selector-tag">h5</span> {
        <span class="hljs-attribute">margin-bottom</span>: <span class="hljs-number">10px</span>;
    }

    <span class="hljs-selector-tag">input</span><span class="hljs-selector-attr">[type=<span class="hljs-string">"text"</span>]</span>, <span class="hljs-selector-tag">textarea</span> {
        <span class="hljs-attribute">width</span>: <span class="hljs-number">90%</span>;
        <span class="hljs-attribute">padding</span>: <span class="hljs-number">10px</span>;
        <span class="hljs-attribute">margin-bottom</span>: <span class="hljs-number">15px</span>;
        <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">5px</span>;
        <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid <span class="hljs-number">#ccc</span>;
    }

    <span class="hljs-comment">/* 表格样式 */</span>
    <span class="hljs-selector-tag">table</span> {
        <span class="hljs-attribute">border-collapse</span>: collapse;
        <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;
    }

    <span class="hljs-selector-tag">th</span>, <span class="hljs-selector-tag">td</span> {
        <span class="hljs-attribute">padding</span>: <span class="hljs-number">8px</span>;
        <span class="hljs-attribute">text-align</span>: left;
        <span class="hljs-attribute">border-bottom</span>: <span class="hljs-number">1px</span> solid <span class="hljs-number">#ddd</span>;
    }

    <span class="hljs-selector-tag">th</span> {
        <span class="hljs-attribute">position</span>: sticky;
        <span class="hljs-attribute">top</span>: <span class="hljs-number">0</span>;
        <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#f2f2f2</span>;
        <span class="hljs-attribute">z-index</span>: <span class="hljs-number">1</span>;
    }

    <span class="hljs-comment">/* 容器样式 */</span>
    <span class="hljs-selector-class">.tbcontainer</span> {
        <span class="hljs-attribute">height</span>: <span class="hljs-number">300px</span>;
        <span class="hljs-attribute">overflow</span>: auto;
        <span class="hljs-attribute">border</span>: solid <span class="hljs-number">1px</span> <span class="hljs-number">#ccc</span>;
        scrollbar-<span class="hljs-attribute">width</span>: thin;
        scrollbar-<span class="hljs-attribute">color</span>: <span class="hljs-number">#888</span> <span class="hljs-number">#f2f2f2</span>;
    }

    <span class="hljs-comment">/* 滚动条样式 */</span>
    <span class="hljs-selector-class">.tbcontainer</span>::-webkit-scrollbar {
        <span class="hljs-attribute">width</span>: <span class="hljs-number">8px</span>;
    }

    <span class="hljs-selector-class">.tbcontainer</span>::-webkit-scrollbar-track {
        <span class="hljs-attribute">background</span>: <span class="hljs-number">#f2f2f2</span>;
    }

    <span class="hljs-selector-class">.tbcontainer</span>::-webkit-scrollbar-thumb {
        <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#888</span>;
        <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">4px</span>;
    }

    <span class="hljs-selector-class">.tbcontainer</span>::-webkit-scrollbar-thumb:hover {
        <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#555</span>;
    }
    <span class="hljs-selector-class">.delete-button</span> {
        <span class="hljs-attribute">padding</span>: <span class="hljs-number">3px</span> <span class="hljs-number">3px</span>;
        <span class="hljs-attribute">border</span>: none;
        <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">3px</span>;
        <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#f44336</span>;
        <span class="hljs-attribute">color</span>: white;
        <span class="hljs-attribute">font-size</span>: <span class="hljs-number">10px</span>;
        <span class="hljs-attribute">cursor</span>: pointer;
    }
    <span class="hljs-selector-class">.delete-button</span><span class="hljs-selector-pseudo">:hover</span> {
        <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#d32f2f</span>;
    }

    <span class="hljs-selector-class">.normal-button</span> {
        <span class="hljs-attribute">padding</span>: <span class="hljs-number">3px</span> <span class="hljs-number">3px</span>;
        <span class="hljs-attribute">border</span>: none;
        <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">3px</span>;
        <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#4E7EFF</span>;
        <span class="hljs-attribute">color</span>: white;
        <span class="hljs-attribute">font-size</span>: <span class="hljs-number">10px</span>;
        <span class="hljs-attribute">cursor</span>: pointer;
    }
    <span class="hljs-selector-class">.normal-button</span><span class="hljs-selector-pseudo">:hover</span> {
        <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#4E6EF2</span>;
    }

    <span class="hljs-selector-class">.locate-button</span> {
        <span class="hljs-attribute">padding</span>: <span class="hljs-number">3px</span> <span class="hljs-number">3px</span>;
        <span class="hljs-attribute">border</span>: none;
        <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">3px</span>;
        <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#0abb87</span>;
        <span class="hljs-attribute">color</span>: white;
        <span class="hljs-attribute">font-size</span>: <span class="hljs-number">10px</span>;
        <span class="hljs-attribute">cursor</span>: pointer;
    }
    <span class="hljs-selector-class">.locate-button</span><span class="hljs-selector-pseudo">:hover</span> {
        <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#0a9966</span>;
    }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span>



</head>
<body>
<div class="container">
<div class="left">
<h5>待添加区域：</h5>
<input type="text" id="inputKey1" oninput="loadData();" placeholder="请输入数据区域关键字搜索" />
<div class="tbcontainer">
<table id="bkmkTable">
<thead>
<tr>
<th>数据区域</th>
<th>显示文字</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 数据行 -->
</tbody>
</table>
</div>
</div>
<div class="right">
<h5>已添加区域：</h5>
<input type="text" id="inputKey2" oninput="loadData();" placeholder="请输入数据区域关键字搜索" />
<div class="tbcontainer">
<table id="bkmkTable2">
<thead>
<tr>
<th>数据区域</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 数据行 -->
</tbody>
</table>
</div>
</div>
</div>


<script>


<span class="hljs-keyword">let</span> definedDataRegionJson = <span class="hljs-variable language_">window</span>.<span class="hljs-property">external</span>.<span class="hljs-property">UserParams</span>;

<span class="hljs-comment">//加载数据</span>
<span class="hljs-keyword">function</span> <span class="hljs-title function_">loadData</span>(<span class="hljs-params"></span>) {
    <span class="hljs-keyword">var</span> kWord1 = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">"inputKey1"</span>).<span class="hljs-property">value</span>;
    <span class="hljs-keyword">var</span> kWord2 = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">"inputKey2"</span>).<span class="hljs-property">value</span>;

    <span class="hljs-keyword">var</span> dataRegionJson = pageofficectrl.<span class="hljs-property">word</span>.<span class="hljs-property">DataRegionsAsJson</span>;
    <span class="hljs-title function_">searchDataRegion</span>(definedDataRegionJson, dataRegionJson, kWord1);
    <span class="hljs-title function_">searchDataRegion2</span>(dataRegionJson, kWord2);
}

<span class="hljs-comment">//加载待添加区域列表</span>
<span class="hljs-keyword">function</span> <span class="hljs-title function_">searchDataRegion</span>(<span class="hljs-params">drDefinedJson, drJson, s</span>){
    <span class="hljs-keyword">var</span> tb1 = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">"bkmkTable"</span>);
    <span class="hljs-keyword">var</span> rCount = tb1.<span class="hljs-property">rows</span>.<span class="hljs-property">length</span>;
    <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">1</span>; i &lt; rCount; i++) {
        tb1.<span class="hljs-title function_">deleteRow</span>(<span class="hljs-number">1</span>);
    }

    <span class="hljs-keyword">if</span>(<span class="hljs-string">''</span> == drDefinedJson) drDefinedJson = <span class="hljs-string">'[]'</span>;
    <span class="hljs-keyword">var</span> definedDataRegionObj = <span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">parse</span>(drDefinedJson);
    <span class="hljs-keyword">var</span> dataRegionsJson = drJson;
    <span class="hljs-keyword">if</span>(<span class="hljs-string">''</span> == dataRegionsJson) dataRegionsJson = <span class="hljs-string">'[]'</span>;
    <span class="hljs-keyword">var</span> dataRegionsObj = <span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">parse</span>(dataRegionsJson);

    <span class="hljs-keyword">var</span> oTable = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">"bkmkTable"</span>);
    <span class="hljs-keyword">var</span> tbodyObj = oTable.<span class="hljs-property">tBodies</span>[<span class="hljs-number">0</span>];
    <span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> key <span class="hljs-keyword">in</span> definedDataRegionObj ){
        <span class="hljs-keyword">let</span> drName = definedDataRegionObj[key].<span class="hljs-property">name</span>;
        <span class="hljs-keyword">let</span> drCaption =  definedDataRegionObj[key].<span class="hljs-property">caption</span>;
        <span class="hljs-comment">//alert("数据区域："+drName+"; 值："+drValue);</span>

        <span class="hljs-keyword">let</span> bFind = <span class="hljs-literal">false</span>;
        <span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> k <span class="hljs-keyword">in</span> dataRegionsObj){
            <span class="hljs-keyword">if</span>(dataRegionsObj[k].<span class="hljs-property">name</span> == drName){
                bFind = <span class="hljs-literal">true</span>;
                <span class="hljs-keyword">break</span>;
            }
        }

        <span class="hljs-keyword">if</span>(bFind) <span class="hljs-keyword">continue</span>;

        <span class="hljs-keyword">if</span> (drName.<span class="hljs-title function_">toLocaleLowerCase</span>().<span class="hljs-title function_">indexOf</span>(s.<span class="hljs-title function_">toLocaleLowerCase</span>()) &gt; -<span class="hljs-number">1</span>) {
            <span class="hljs-keyword">var</span> oTr = tbodyObj.<span class="hljs-title function_">insertRow</span>();
            <span class="hljs-keyword">var</span> oTd = oTr.<span class="hljs-title function_">insertCell</span>();
            oTd.<span class="hljs-property">innerHTML</span> = drName;
            oTd = oTr.<span class="hljs-title function_">insertCell</span>();
            oTd.<span class="hljs-property">innerHTML</span> = drCaption;
            oTd = oTr.<span class="hljs-title function_">insertCell</span>();
            oTd.<span class="hljs-property">innerHTML</span> = <span class="hljs-string">'&lt;button class="normal-button" onclick="addDataRegion(\''</span>+drName+<span class="hljs-string">'\',\''</span>+drCaption+<span class="hljs-string">'\');loadData();"&gt;添加&lt;/button&gt;'</span>;
        }
    }
}

<span class="hljs-comment">//加载已添加区域列表</span>
<span class="hljs-keyword">function</span> <span class="hljs-title function_">searchDataRegion2</span>(<span class="hljs-params">drJson, s</span>) {
    <span class="hljs-comment">//删除所有行</span>
    <span class="hljs-keyword">var</span> tb1 = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">"bkmkTable2"</span>);
    <span class="hljs-keyword">var</span> rCount = tb1.<span class="hljs-property">rows</span>.<span class="hljs-property">length</span>;
    <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">1</span>; i &lt; rCount; i++) {
        tb1.<span class="hljs-title function_">deleteRow</span>(<span class="hljs-number">1</span>);
    }

    <span class="hljs-keyword">let</span> dataRegionsJson = drJson;
    <span class="hljs-keyword">if</span>(<span class="hljs-string">''</span> == dataRegionsJson) dataRegionsJson = <span class="hljs-string">'[]'</span>;
    <span class="hljs-keyword">let</span> dataRegionsObj = <span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">parse</span>(dataRegionsJson);
    <span class="hljs-keyword">var</span> oTable = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">"bkmkTable2"</span>);
    <span class="hljs-keyword">var</span> tbodyObj = oTable.<span class="hljs-property">tBodies</span>[<span class="hljs-number">0</span>];
    <span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> key <span class="hljs-keyword">in</span> dataRegionsObj ){
        <span class="hljs-keyword">let</span> drName = dataRegionsObj[key].<span class="hljs-property">name</span>;

        <span class="hljs-keyword">if</span> (drName.<span class="hljs-title function_">toLocaleLowerCase</span>().<span class="hljs-title function_">indexOf</span>(s.<span class="hljs-title function_">toLocaleLowerCase</span>()) &gt; -<span class="hljs-number">1</span>) {
            <span class="hljs-keyword">var</span> oTr = tbodyObj.<span class="hljs-title function_">insertRow</span>();
            <span class="hljs-keyword">var</span> oTd = oTr.<span class="hljs-title function_">insertCell</span>();
            oTd.<span class="hljs-property">innerHTML</span> = drName;
            oTd = oTr.<span class="hljs-title function_">insertCell</span>();
            oTd.<span class="hljs-property">innerHTML</span> = <span class="hljs-string">'&lt;button class="delete-button" onclick="deleteDataRegion(\''</span>+ drName +<span class="hljs-string">'\');loadData();"&gt;删除&lt;/button&gt; &lt;button class="locate-button" onclick="locateDataRegion(\''</span>+ drName +<span class="hljs-string">'\');"&gt;定位&lt;/button&gt;'</span>;
        }
    }

}

<span class="hljs-keyword">function</span> <span class="hljs-title function_">locateDataRegion</span>(<span class="hljs-params">drName</span>) {
    pageofficectrl.<span class="hljs-property">word</span>.<span class="hljs-title class_">LocateDataRegion</span>(drName);
}

<span class="hljs-keyword">function</span> <span class="hljs-title function_">deleteDataRegion</span>(<span class="hljs-params">drName</span>){
    pageofficectrl.<span class="hljs-property">word</span>.<span class="hljs-title class_">DeleteDataRegion</span>(drName);
}

<span class="hljs-keyword">function</span> <span class="hljs-title function_">addDataRegion</span>(<span class="hljs-params">drName, drValue</span>){
    pageofficectrl.<span class="hljs-property">word</span>.<span class="hljs-title class_">AddDataRegion</span>(drName, drValue);
}

<span class="hljs-title function_">loadData</span>();



</script>
</body>
</html>


自定义工具栏“定义数据区域”按钮的相关代码：


javascript
function Save() {
pageofficectrl.WebSave();
}


function ShowDefineDataRegions() {
var drDefinedJson = pageofficectrl.word.DataRegionsDefinedAsJson;
pageofficectrl.ShowHtmlModelessDialog("DataRegionDlg.htm", drDefinedJson, "left=300px;top=390px;width=560px;height=410px;frame:no;");
}


function OnPageOfficeCtrlInit() {
pageofficectrl.AddCustomToolButton("保存", "Save", 1);
pageofficectrl.AddCustomToolButton("定义数据区域", "ShowDefineDataRegions", 10);
}

在最终需要动态填充数据到 word 模板中生成正式合同文件时，开发人员只管编写代码给所有的数据区域赋值即可，无需关心用户自定义的 word 模板中到底使用了哪些数据区域，因为那些没有使用的数据区域会被 PageOffice 自动忽略掉；而最终用户也可以根据自己的实际需要定义好 word 模板中各项数据及其位置，无需关心数据从哪里来，也不用事事都与开发人员沟通，当业务需求发生简单的变化时，可以自主修改 word 模板来满足新的需求。这样一来，不管是用户还是开发人员，都在一定程度上从这种纷杂多变的业务需求中解脱出来。

参考链接：用户自定义模板中数据区域