Kendo UI致力于新的開發，來滿足不斷變化的需求，通過React框架的Kendo UI JavaScript封裝來支持React Javascript框架。Kendo UI for React能夠為客戶提供更好的用戶體驗，并且能夠更快地構建更好的應用程序。

雖然查看PDF可能不是開發人員最需要關注的問題，但有可能最終開發者都要在自己的React應用程序中包含一個PDF，KendoReact的PDF Viewer組件能幫助開發者快速處理這個問題！

Kendo UI R1 2023 SP1正式版下載

Telerik_KendoUI產品技術交流群：726377843    歡迎一起進群討論

為什么PDF Viewer組件能替代瀏覽器PDF Viewer？

可能會有開發者會說，每個現代瀏覽器都內置了PDF Viewer組件，為什么還需要其他組件呢？從技術上講，瀏覽器確實可以處理PDF瀏覽，但是有幾個理由可以很好地全是為什么應該考慮使用PDF查看器組件，而不是將其留給默認的瀏覽器PDF查看器。

控制用戶流

瀏覽器PDF查看器將始終在一個新選項卡中打開，將用戶從應用程序流中移除。這是非常具有破壞性的，如果PDF的內容通知用戶在應用程序中的決策和操作，這很不友好。用戶不得不做整個來回切換的事情，或者試著讓他們的窗口平鋪得恰到好處(所以現在他們使用應用程序時只有半個屏幕)。

一致的用戶體驗

用戶體驗因用戶而異，這取決于他們使用的瀏覽器。例如谷歌瀏覽器的PDF瀏覽體驗和Safari上的用戶有很大不同，這還不包括使用手機和平板電腦的用戶。

允許自定義

當開發使用瀏覽器默認查看器時，無法控制用戶如何與PDF的交互。不想提供下載選項？不需要搜索功能？當開發者使用瀏覽器提供的默認值時，就失去了自定義用戶交互選項的功能，只能使用默認值。

一致的設計和樣式

瀏覽器PDF查看器與應用程序的外觀不匹配，開發者可能會花費大量的時間和精力去為應用程序創建自定義品牌和設計風格。使用PDF Viewer組件時，可以將其直接插入到應用程序中，并與已經使用的設計系統相匹配。

事件管理

當開發者使用PDF Viewer組件時，可以獲得與用戶操作掛鉤的功能。需要追蹤下載量?在頁面更改時觸發事件?留意錯誤?一個好的PDF Viewer組件會公開這些事件，允許開發者在應用程序中輕松處理文件操作邏輯。

KendoReact PDF Viewer組件

KendoReact PDF Viewer組件使用起來非常簡單：

<PDFViewerdata={SampleFileBase64}/>

就是這樣，一行代碼，36個字符。

當然，如果您想自定義工具欄、應用自己的風格等，會添加更多的字符。

自定義工具欄

KendoReact PDFViewer組件包括10個內置工具，包含：分隔器、間隔器、zoomInOut、縮放、選擇、搜索和打開等，組件將默認包含所有工具，但如果您只想指定其中的某個選擇，只需將這些工具直接傳遞到工具道具中。

<PDFViewer data={SampleFileBase64} tools={['pager','zoom']}/>

使用事件

KendoReact PDF Viewer組件還提供了以下事件，您可以：

• onLoad – 加載PDF文檔時觸發。
• onError – 發生錯誤時觸發，例如無法讀取所選文件時。
• onDownload –單擊下載工具時觸發，為防止下載，返回false。
• onPageChange – 頁面更改時觸發。
• onRenderContent – 在內容組件即將呈現時觸發。
• onZoom – 縮放級別更改時觸發。
• onRenderLoader – 在加載指示組件即將呈現時觸發。
• onRenderToolbar –在工具欄組件即將呈現時觸發。

所以，要使用這些，就像這樣簡單：

function myFunction() {
console.log('Hello World');
}

---

<PDFViewer data={SampleFileBase64} onPageChange={myFunction}/>