react下實現乙個PDF展示元件

簡介：在react的antd-pro的框架下展示本地的pdf檔案

聽說過大名鼎鼎的pdf.js，但是因為是在react框架下，所以選取了兩個可行的外掛程式

兩個外掛程式都是對pdf進行的封裝。兩個外掛程式都進行了嘗試，相對而言react-pdf功能更強大並且文件也比較清晰，但是使用也會相對複雜一點。最後使用的是react-pdf-js這個外掛程式。

第一步：展示乙個本地文件。

按照官方的文件：

render() 

return (
)}

例子：要載入乙個'e:\1.pdf',那麼應該那麼配置：

const pdftest = require('e:\\1.pdf');

render() 
return (
)}

這一步被卡住過，剛開始想的是根據選擇的檔案然後獲取檔案的實際位址然後運用require去獲取檔案，但是實現的時候發現瀏覽器的安全策略無法讓瀏覽器獲取檔案的真實路徑。

但是！我們可以通過建立乙個url物件去獲取檔案的乙個blob。使用window.url.createobjecturl建立乙個file檔案，並且react-pdf-js可以直接接受乙個這樣子的檔案。

部分**如下：

handlebuttononchange = e =>,

})}createpdf = () => = this.state;
if(!pdftest) return;
return(
第 頁 共 頁
)}render() );}

以下做法不推薦：

在之前我沒發現這個之前，通過修改原始碼的這個地方改為：

componentwillreceiveprops(newprops)  = this.props;

const = this.state;
const = newprops;
if(newfile !== oldfile));
if (ondocumentcomplete) 
pdf.getpage(page).then(p => this.drawpdf(p));
});}else
if (newprops.scale !== scale) 
}}

第三筆：其他功能。

翻頁以及跳頁：

handleturnpage = e => = this.state;

if(!numpages)
let newpagenumber = pagenumber;
switch (e.target.id) 
break;
case 'pagedown':
newpagenumber += 1;
if(newpagenumber > numpages)
break;
case 'numberpage':
if(!turnpagenumber)else if(turnpagenumber <= 0||turnpagenumber > numpages)
newpagenumber = turnpagenumber;
break;
default:
break;
} this.setstate()
}render() );}

這個外掛程式的功能很強大，但是使用就相對而言比較複雜。官方的

複雜demo

1、file引數。

在這裡file這個引數和react-pdf-js的不一樣，在require的時候都是一樣的，但是在轉換的時候不用建立url物件，直接將input裡面的file傳過去即可。並且不需要key。

例子：

handlebuttononchange = e =>,})}

在官方文件中提到使用svg可以解決這個問題，但是svg選擇出來是亂碼。所以在使用的時候希望遮蔽掉text layer，在文件中也有提到，在page中設定。

以上是所有內容。

從頭實現乙個簡易版React（一）

工作中使用react也很長一段時間了，雖然對它的用法，原理有了一定的了解，但是總感覺停留在表面。本著知其然知其所以然的態度，我試著去看了react原始碼，幾天下來，發現並不能看懂，反而更加雲裡霧裡了 既然看不懂，那就看看社群前輩們寫的一些原始碼分析文章以及實現思路吧，又這麼過了幾天，總算是摸清點思路...

自己動手實現乙個簡單的React

為了更好的理解react，我決定讀preact的原始碼，preact是乙個非常小的框架，同時也和react的實現原理以及api一樣，幾乎可以很好代替react。雖然還是有一些差異的。但是使用的時候幾乎不會有什麼違和感。看原始碼總是不夠過癮，於是做了乙個偉大的決定就是自己親手去寫乙個react，畢竟p...

實現乙個react系列二 渲染元件

在上一節jsx和虛擬dom中，我們了解了react中的jsx到虛擬dom，以及如何將虛擬dom渲染成真實的dom。在這一節中，我們將會了解react中元件是如何渲染的。在react中，元件有兩種使用方法 import react from react 類定義的元件 class hello exten...