突破技術限制，實現Web端靜默列印

葡萄城技術團隊發表於2021-12-28
Web

作為Web開發的同僚們，估計都有一個共同的煩惱，Web端為什麼不能夠像 CS端那樣直接列印預覽？直接移除掉列印預覽介面不就可以了？

真實情況是Web端受限於瀏覽器的許可權，無法直接訪問印表機等本機資源。所以，在Web上實現無預覽和列印並不是一個簡單的問題，而是突破許可權、突破平臺的問題。這就導致了使用者在列印報表時，至少需要點選兩個按鈕才能完成列印，如果是需要批量列印的場景，使用者則需要重複多次點選按鈕，非常麻煩。

而不瞭解詳細內情的甲方則會非常不解，這麼簡單的一個訴求，只是省去點選一個操作步驟，為什麼你們辦不到呢？

這種對於我們卑微乙方的靈魂拷問，讓我們也很頭疼，不是我們辦不到，是客觀條件不允許我們辦到。

作為一個資歷比較老的 Wyn Enterprise(讀音：One)嵌入式BI和ActiveReports報表控制元件的技術顧問，這兩年接觸的客戶，基本不再使用 Winform或WPF了，大部分專案都遷移到B/S 端，採用前後端分離的架構，或者 MVC。

在這種情況下，客戶都會面臨需要列印卻無法直接連線印表機，進行預設列印的能力。如果是物流行業的企業或者生產製造企業，網頁端列印，都是批量性的操作，比如物流單，每次批量列印上千張，如果每列印一張彈出一次列印預覽介面，可能用不了多久，我們的可愛的甲方會將我們的電話打爆炸。

在如此嚴峻的形勢之下，外加眾多使用者都追著詢問這個問題，靜默列印在 Web端的功能實現也是非常急迫的。

現在大部分列印過程基本是將需要列印的內容匯出為PDF檔案，然後呼叫瀏覽器的列印預覽，進行列印。既然有了第一步，就一定有直接實現靜默列印的方法，。以下是本人搜尋全網，覺得比較合適的內容，現將結果分享給大家。

實現思路有兩種：

  1. 設定瀏覽器
  2. 安裝外掛，使用代理軟體

話不多說直接乾貨，看看測試結果。

設定瀏覽器

有限制的地方就會有需求，既然列印時瀏覽器限制，那麼就一定也有別的使用者也有我們同樣的需求，方法總比困難多。搜尋後，我們找到在Chrome 和火狐瀏覽器的設定中，有解決的方法，這法子看著像模像樣，點贊也很多：

大致內容是：

  1. 進入 Chrome的高階設定，設定瀏覽器預設的主頁為我們的 Web應用需要靜默列印的頁面。跟著介紹，我們也操作起來。
  • 點選設定
  • 外觀-設定顯示主頁按鈕，並輸入我們要訪問的 Web頁面。

  • 開啟桌面快捷方式，修改在字尾輸入--kiosk --kiosk-printing。

而走到這一步，此路就不通了。系統會一直彈出如下的錯誤，無法修改。

讓我們換個瀏覽器試試。

  1. 修改-火狐瀏覽器
  2. 在瀏覽器輸入：about:config
  3. 在輸入框輸入 print.always\_print\_silent

並設定為Boolean 型別，點+號

  1. 重啟-測試列印

此時系統依然會彈出列印預覽對話方塊，此方法依舊無效。

使用代理軟體

JSPrint

使用方法簡單，先用Demo網站呼叫JSPrintManager列印藉口介面，然後使用客戶端進行代理，就可以實現列印。支援的平臺有：windows 10， IE，Edge, 火狐，Chrome，Safari。

下面是一些常用能介紹。

使用使用者選擇印表機程式碼示例：

const cpj = new JSPM.ClientPrintJob();

cpj.clientPrinter =  new JSPM.UserSelectedPrinter();

const printFile = new JSPM.PrintFilePDF(fileUrl, JSPM.FileSourceType.URL, fileName, copiesNumber);

cpj.files.push(printFile);

await cpj.sendToClient();

會出現列印對話方塊

使用預設印表機

const cpj = new JSPM.ClientPrintJob();

cpj.clientPrinter =  new JSPM.DefaultPrinter();

const printFile = new JSPM.PrintFilePDF(fileUrl, JSPM.FileSourceType.URL, fileName, copiesNumber);

cpj.files.push(printFile);

await cpj.sendToClient();

使用安裝的印表機

const cpj = new JSPM.ClientPrintJob();

cpj.clientPrinter =  new JSPM.InstalledPrinter('Microsoft Print to PDF);

const printFile = new JSPM.PrintFilePDF(fileUrl, JSPM.FileSourceType.URL, fileName, copiesNumber);

cpj.files.push(printFile);

await cpj.sendToClient();

獲取印表機列表：

const printersInfo = await JSPM.JSPrintManager.getPrintersInfo();

console.log(printersInfo);

JSPrintManager使用起來並不難，但在的使用過程中，存在一些較為明顯的技術限制。 在測試過程中，我們發現由於未知的因素，會出現舊示例無法使用工作，需要我們新建一個示例來完成JSPrint的靜默列印的呼叫；除此之外，這種方法在火狐瀏覽器中無法正常執行。如果你是Mac OS需要注意，一旦試用JSPrintManager將無法解除安裝。

Wyn Enterpriese

實現線上報表設計，預覽及靜默列印一體功能 Wyn Enterprise V5.0 Update1 帶來了突破性的報表列印——靜默列印。

示例下載：

https://gcdn.grapecity.com.cn...;aid=MTgzNDk3fDg2YWRhNTgyfDE2NDA1OTEzMzd8MjkzODJ8MTM2MTU1

操作步驟：

1 、啟動列印代理服務（列印代理是使用PowerShell指令碼完成的）

包含檔案如下：


啟動代理必須的環境資源：
1、【Visual Studio 2022】(https://visualstudio.microsoft.com/vs/) 17.0 及以上版本（編譯例項需要）
2、【.NET 6.0 SDK】 (https://www.microsoft.com/net/download)
3、【.NET Core Hosting Bundle】(https://docs.microsoft.com/en-us ... view=aspnetcore-5.0) (IIS 部署環境)

資原始檔介紹：

./switchPrinter.ps1   切換預設的印表機資源

`./start.ps1`  啟動和安裝列印服務

./stop.ps1  停止服務
 ./build.ps1  如果修改了 src資料夾下的檔案，需要啟動該指令碼，進行重新編譯，編譯的專案會放置在./PrintAgent 資料夾中
 ./debug.ps1 如果修改了src資料夾，可以使用該指令碼進行除錯。

啟動代理伺服器：
將示例下載後，以管理員許可權開啟powershell 工具可先執行以下命令：

  • 執行命令 Set-ExecutionPolicy Bypass -Scope CurrentUser -Force 啟用執行指令碼功能

  • 呼叫 ./switchPrinter.ps1 命令選擇預設的印表機

  • 使用 ./start.ps1 命令啟動服務，如果結束後，呼叫./stop.ps1 關閉案例

2、啟動成功後，我們再來執行WynReportDesigner 或WynViewer示例：
執行這些示例，會自動載入到預設的印表機選項，。實現列印需求。

該示例代理使用葡萄城內部的PDF列印庫進行無聲列印。 可以通過附件中的powerhellpowershell指令碼啟動Agent並在Windows 10上註冊其自動執行。

配置成功後，可以看到點選列印按鈕後，後臺會連線預設的印表機進行列印。

總結

解決靜默列印是沒有捷徑可以走的，設定瀏覽器該方法是看著是非常便捷，但是結果是並無效果。這時使用代理是一個行之有效的方法，但是現成的智慧結晶往往需要一些知識付費。Anyway，方法總比困難多，如果大家在遇到類似的需求時，也不用發愁，現在市面上已經出現了行之有效的方法解決問題。去解決這個問題。

相關文章