Tips & Tricks

如何在可填寫的 PDF 表單中新增自動計算字段

可自動新增行項目、計算稅金或合計發票的可填寫 PDF 表單與收件人必須自行進行數學運算的文件有著本質上的不同。自動計算欄位將靜態表單轉變為工作計算器。收件人輸入數量和費率,表格會在他們眼前即時計算總數。對於發票、採購訂單、費用報告以及任何需要正確添加數字的表單,自動計算是幫助使用者的表單與建立額外工作的表單之間的差異。

將計算欄位新增至 PDF 需要支援基於 JavaScript 的欄位腳本的表單編輯器,因為 PDF 計算在每個主要 PDF 檢視器中內建的 JavaScript 簡化版本上執行。此設定涉及三個步驟:建立使用者鍵入數字的輸入欄位、建立顯示結果的輸出欄位以及編寫將它們連結在一起的計算腳本。配置完成後,只要使用者變更值,計算就會自動運作。無需儲存、無需刷新、無需單擊按鈕。

How to Add Auto-Calculation Fields in a Fillable PDF Form

了解 PDF 欄位類型及其如何協同工作

在編寫任何計算腳本之前,您需要了解參與計算的三種欄位類型。文字欄位接受使用者鍵入的輸入。它們可以配置為僅接受數字、日期或任何文字。對於計算表單,純數字文字欄位是標準輸入類型。每個欄位都有計算腳本引用的唯一名稱。一致的命名,例如“Item1_Qty” “項目1_率”, “項目1_總計,”使計算邏輯可讀、可維護。

下拉清單和單選按鈕也可以輸入到計算中。下拉清單可以讓使用者選擇產品,對應的價格會自動填入查找表中的費率欄位。複選框可以切換是否包含可選費用。關鍵概念是任何具有值的欄位都可以成為計算的一部分。此腳本讀取每個輸入欄位的目前值,執行數學運算,並將結果寫入輸出欄位。

輸出欄位通常設定為唯讀,因此使用者不會意外覆蓋計算結果。只讀計算欄位在使用者控制的數字和表單控制的數字之間創建了清晰的分隔。這種區別對於形式完整性很重要。如果使用者可以編輯總計,則該計算也可能不存在。

WukongPDF

嘗試編輯 PDF

無需安裝。直接在您的瀏覽器中工作。

立即開始 →

分步:建立簡單的自動計算表格

首先建立您的輸入欄位。在PDF表單編輯器中,選擇表單欄位工具並為使用者需要輸入的每個值放置文字欄位。對於發票,這可能是每個行項目的數量欄位和單價欄位。為每個欄位指定一個清晰、唯一的名稱。避免在欄位名稱中使用空格和特殊字符,因為 JavaScript 將它們引用為變數名稱。使用底線或駝峰命名法代替:“item1_qty”不是“商品 1 數量”。

接下來,建立將顯示計算總數的輸出欄位。將其放置在邏輯位置,通常位於數字列的底部或總計部分。在字段屬性中將此字段設為唯讀。這很重要。可編輯的計算欄位破壞了數學自動化的整個目的。

現在開啟輸出欄位的計算屬性。在WukongPDF的編輯器中,選擇總計字段,開啟字段屬性中的計算選項卡,然後選擇「自訂計算腳本」。這將開啟一個腳本編輯器,您可以在其中編寫執行計算的 JavaScript。簡單的行項目總計如下所示:event.value = this.getField(“item1_qty”).value * this.getField(“item1_rate”).value;。 「事件.值」是欄位中顯示的結果。 “this.getField()”按名稱檢索另一個欄位的目前值。您可以連結多個計算並將它們加在一起以獲得總計:event.value = this.getField(“line1_total”).value + this.getField(“line2_total”).value + this.getField(“line3_total”).value;。

寫完腳本後,立即測試。儲存表單,在 PDF 檢視器中開啟它,在輸入欄位中鍵入數字,然後觀察計算欄位的更新。按 Tab 鍵在欄位之間移動,這會觸發重新計算。在數字欄位中輸入一個字母,看看會發生什麼。腳本應該處理或優雅地忽略非數字輸入。如果總數顯示「NaN」 (不是數字),輸入欄位之一包含非數字的內容,且腳本需要進行驗證檢查。新增一個保護子句,例如: var qty = Number(this.getField(“item1_qty”).value) || 0;這會將欄位值轉換為數字,如果轉換失敗,則預設為零,從而防止 NaN 在計算中級聯。

處理邊緣情況:空字段、負數和除以零

當真實用戶填寫表單時,與測試資料完美配合的計算腳本可能會以令人尷尬的方式失敗。最常見的故障是空白欄位。當使用者尚未在欄位中輸入任何內容時,其值為空字串,而不是零。將空字串乘以數字會產生 NaN,然後它會傳播到依賴該結果的每個計算。

解決方法是在每個輸入值為空時將其標準化為零。在每個計算腳本的頂部,檢索每個字段值並將其轉換:var qty = this.getField(“qty”).value; if (qty === "" || isNaN(qty)) qty = 0;這種模式一致地應用於每個輸入字段,消除了空字段問題。它還可以處理使用者不小心在數字欄位中輸入字母的情況,否則會產生 NaN。

負數需要政策決定。表格該接受負數嗎?在大多數業務形式中,答案是否定的,計算腳本應強制執行:if (qty < 0) qty = 0;。除零是百分比和比率計算中出現的一個更微妙的問題。如果用作分母的欄位可以為零,則腳本必須在除法之前進行檢查: if (denominator !== 0) { result = numerator / denominator; } 否則{ 結果 = 0; }。這些保護子句添加了幾行程式碼,並防止表單向使用者顯示令人困惑的錯誤值。

高級計算:條件邏輯和查找表

基本算術處理行項目總計和總計。更複雜的表單需要根據使用者選擇而變化的條件計算。一個常見的例子是稅收計算,其中稅率取決於所選的州或省。計算腳本讀取下拉欄位的值並套用對應的比率:var state = this.getField(“state”).value;無功率 = 0;if (狀態===“CA”)速率=0.0725;否則 if (state === "NY") 比率 = 0.04; event.value = 小計 * 比率;

對於具有許多選項的較大查找表,switch 語句或查找物件比 if-else 條件鏈更清晰。 var rates={“CA”:0.0725,“NY”:0.04,“TX”:0.0625,“FL”:0.06}; var 利率 = 利率[狀態] || 0;這種模式可以擴展到數十個條目而不會變得不可讀。預設值為零,由 || 提供運算符,優雅地處理不在查找表中的狀態。

折扣等級是另一個常見的條件用例。如果小計超過閾值,則應用百分比折扣:vardiscount=0;如果(小計> 1000)折扣=小計* 0.10; else if (小計 > 500) 折扣 = 小計 * 0.05; event.value = 小計 - 折扣 + 稅;。每次任何欄位變更時都會執行計算,因此當使用者新增或刪除商品時折扣會自動更新。使用者可以即時看到價格調整,這正是互動體驗,使得Fillable PDF表單感覺像是應用程式而不是一張紙。

發送計算表格之前測試

未經測試的計算形式會產生錯誤的數字。系統測試可以在錯誤到達客戶或消費者之前發現錯誤。首先使用正常值進行測試:輸入您可以在腦中計算的數字並驗證輸出是否匹配。然後測試邊緣情況:將欄位留空,輸入零,如果業務規則拒絕負數,則輸入負數,輸入非常大的數字以檢查溢出,然後在數字欄位中輸入文字。

在多個 PDF 檢視器上進行測試。在 Adobe Acrobat 中正確計算的表單在 Mac 上的預覽、Web 瀏覽器的內建 PDF 檢視器或行動 PDF 應用程式中的表現可能有所不同。每個檢視器實作 JavaScript 引擎的方式都略有不同。某些移動檢視器根本不支援 PDF JavaScript,並且將顯示表單字段,而沒有任何計算功能。如果您的受眾包括行動用戶,請在表單上新增註釋,表示計算需要桌面 PDF 檢視器,或提供預先計算的參考表作為後備。

最後,從頭到尾測試使用者工作流程。像收件人一樣開啟表格。依照真實用戶的順序填寫。保存起來。重新開啟已儲存的副本並驗證計算仍然正確。列印它並確保計算值出現在紙上。在螢幕上看起來正確但列印空白計算欄位的表單是令人驚訝的常見故障模式,這是由於列印引擎處理欄位值的方式與螢幕渲染器不同而導致的。與向 500 名客戶發送錯誤計算總數的發票表格所造成的損失相比,在徹底測試上花費的時間根本不算什麼。

何時電子表格是更好的工具

PDF 表单计算功能强大,但也有局限性,这使得电子表格成为更合适的选择。 PDF 計算無法引用外部資料來源。他们无法获取实时汇率、股票价格或数据库值。它们无法执行迭代计算,例如目标搜索或求解器函数。他们无法根据输入的数据生成图表或数据透视表。如果您的表單需要任何這些功能,請在 Excel 或 Google Sheets 中建立計算邏輯並將結果匯出到 PDF,而不是嘗試在 PDF 中複製電子表格功能。

PDF 計算非常適合數學簡單且輸入有限的表單:具有固定行項目的發票、具有已知產品價格的訂單、具有預定義類別的費用報告以及具有標準小時費率的時間表。該表單只做一件事,而且可靠,並且不需要接收者進行使用培訓。 WukongPDF 的PDF 編輯器 很好地處理了這一點,將表單欄位建立與 JavaScript 計算支援結合在一個基於瀏覽器的工具中。對於正確的用例,精心建立的 PDF 計算表單可以消除有關數學錯誤的後續電子郵件,加快處理時間,並提供比具有單獨計算器的靜態表單更專業的體驗。

WukongPDF

嘗試編輯 PDF

無需安裝。直接在您的瀏覽器中工作。

立即開始 →