Kendo UI致力于新的開發(fā)，來(lái)滿足不斷變化的需求，通過(guò)React框架的Kendo UI JavaScript封裝來(lái)支持React Javascript框架。Kendo UI for React能夠?yàn)榭蛻籼峁└玫挠脩趔w驗(yàn)，并且能夠更快地構(gòu)建更好的應(yīng)用程序。

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

Kendo UI R1 2023 SP1正式版下載

Telerik_KendoUI產(chǎn)品技術(shù)交流群：726377843    歡迎一起進(jìn)群討論

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

可能會(huì)有開發(fā)者會(huì)說(shuō)，每個(gè)現(xiàn)代瀏覽器都內(nèi)置了PDF Viewer組件，為什么還需要其他組件呢？從技術(shù)上講，瀏覽器確實(shí)可以處理PDF瀏覽，但是有幾個(gè)理由可以很好地全是為什么應(yīng)該考慮使用PDF查看器組件，而不是將其留給默認(rèn)的瀏覽器PDF查看器。

控制用戶流

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

一致的用戶體驗(yàn)

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

允許自定義

當(dāng)開發(fā)使用瀏覽器默認(rèn)查看器時(shí)，無(wú)法控制用戶如何與PDF的交互。不想提供下載選項(xiàng)？不需要搜索功能？當(dāng)開發(fā)者使用瀏覽器提供的默認(rèn)值時(shí)，就失去了自定義用戶交互選項(xiàng)的功能，只能使用默認(rèn)值。

一致的設(shè)計(jì)和樣式

瀏覽器PDF查看器與應(yīng)用程序的外觀不匹配，開發(fā)者可能會(huì)花費(fèi)大量的時(shí)間和精力去為應(yīng)用程序創(chuàng)建自定義品牌和設(shè)計(jì)風(fēng)格。使用PDF Viewer組件時(shí)，可以將其直接插入到應(yīng)用程序中，并與已經(jīng)使用的設(shè)計(jì)系統(tǒng)相匹配。

事件管理

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

KendoReact PDF Viewer組件

KendoReact PDF Viewer組件使用起來(lái)非常簡(jiǎn)單：

<PDFViewerdata={SampleFileBase64}/>

就是這樣，一行代碼，36個(gè)字符。

當(dāng)然，如果您想自定義工具欄、應(yīng)用自己的風(fēng)格等，會(huì)添加更多的字符。

自定義工具欄

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

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

使用事件

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

• onLoad – 加載PDF文檔時(shí)觸發(fā)。
• onError – 發(fā)生錯(cuò)誤時(shí)觸發(fā)，例如無(wú)法讀取所選文件時(shí)。
• onDownload –單擊下載工具時(shí)觸發(fā)，為防止下載，返回false。
• onPageChange – 頁(yè)面更改時(shí)觸發(fā)。
• onRenderContent – 在內(nèi)容組件即將呈現(xiàn)時(shí)觸發(fā)。
• onZoom – 縮放級(jí)別更改時(shí)觸發(fā)。
• onRenderLoader – 在加載指示組件即將呈現(xiàn)時(shí)觸發(fā)。
• onRenderToolbar –在工具欄組件即將呈現(xiàn)時(shí)觸發(fā)。

所以，要使用這些，就像這樣簡(jiǎn)單：

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

---

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