PageOffice 國產版 ：支援信創系統，支援銀河麒麟V10和統信UOS，支援X86（intel、兆芯、海光等）、ARM（飛騰、鯤鵬、麒麟等）、龍芯（LoogArch）晶片架構。
本示例關鍵程式碼的編寫位置
Vue+Springboot
注意
本文中展示的程式碼均為關鍵程式碼，複製貼上到您的專案中，按照實際的情況，例如文件路徑，使用者名稱等做適當修改即可使用。
不管是政府機關、公司企業，還是金融行業、教育行業等單位，在辦公過程中都經常需要填寫各種文書和表格，比如通知、報告、登記表、計劃表、申請表等。這些文書和表格往往是用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填寫最直觀易懂的優點，完美解決了使用者線上填寫文書和表格的問題。下面是一個簡單的示例，演示瞭如何使用前端框架內建對話方塊填寫一個“完稅證明申請表”的效果。
-
線上開啟一個“完稅證明申請表”的Word表格，如下圖所示：
-
點選檔案中的文字“點此填寫表格”，彈出前端框架內建模態框視窗，填寫個人資訊，如下圖所示：
-
填寫完畢，點選確定按鈕，呼叫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的初始化事件回撥函式，您可以在這裡新增自定義按鈕
},
openFile() {
return request({
url: '/ApplicationForm/Word',
method: 'get',
})
},
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);
},
//OnWordDataRegionClick為PageOffice內建回撥函式，只要寫上其對應名稱和引數，就會自動觸發
OnWordDataRegionClick(Name,Value) {
if (Name == "PO_Edit") {
this.openDialog1();
}
}
},
mounted: function () {
//將當前頁面methods中定義的函式掛載到PageOffice控制元件，例如控制元件觸發的事件、自定義按鈕觸發的函式。
window.POPageMounted = this;//此行必須
}
}
參考連結：用前端框架內建對話方塊在Word中填空填表