React-pdf-js插件使用與base64顯示圖片與文件

因爲公司項目須要，圖片與文件須要存到數據庫而存本地，前端用的react，後端 是接口的方式，只能選擇base64這種方式，並且也方即可以存各類格式。

1.React下react-pdf-js安裝
官網

你們能夠點進去，而後裏面有介紹安裝方法如何使用。

2.而後頁面顯示以下:

引入
import PDF from 'react-pdf-js';
export default class Document extends Component{
    construtor(){
        super();
        this.state = {}
    }
     onDocumentComplete = (pages) => {
        console.log(pages); //總頁
        this.setState({ page: 1, pages });
    }
    handlePrevious = () => {
        this.setState({ page: this.state.page - 1 });
    }

    handleNext = () => {
        this.setState({ page: this.state.page + 1 });
    }
    
    render(){
        //翻頁
        const pagination = (previous,next) =>{
            let previousButton = <Button onClick={this.handlePrevious}>上一頁</Button>;
            if(previous === 1){
                previousButton = <Button>首頁</Button>;
            }
            let nextButton = <Button onClick={this.handleNext}>下一頁</Button>;
            if(previous === next){
                nextButton = <Button>最後一頁</Button>;
            }

            return <span>{previousButton}{nextButton}  第{previous}頁 共{next}頁</span>;
        }
                
        return(
            <PDF
            file={apiManager.pdf + this.state.id}
            onDocumentComplete={this.onDocumentComplete}
            page={this.state.page}
            width={this.state.width}
            />        
        )
    }
}

而後分頁有部分我沒有按他官網的來我是本身寫的,由於我以爲官網的寫得太多了，你們能夠參考一下

3.React 採用base64顯示圖片
因爲我是作PHP的，後臺接口與前端都是本身寫的，這裏只介紹php的方法。我也看過網上的一些方法，我不知道爲何那些人會寫得那麼麻煩，一條語句的問題，寫了一大片，並且還有問題。代碼以下:
後臺代碼:

$fileHandle = fopen($thumbImageFile,"r"); //打開文件
        $file_datas = fread($fileHandle, filesize($thumbImageFile));//讀取文件
        $thumbnail = chunk_split(base64_encode($file_datas));轉會爲base64將圖片

直接使用chunk_split(base64_encode(讀取的圖片));直接就能夠化爲base64而後存到數據庫，便可

React顯示:

//imageSrc 是從數據庫中取出來的圖片字段取到的數據
<img src={'data:image/jpg/png/gif;base64,'+imageSrc} alt="pic" />

若是要顯示pdf直接application/pdf;basa64,...
不過我的不建議pdf使用這種方式，由於pdf轉成這種格式後，會比你上傳的文件大8倍。也就是你傳1M，數據庫存的是8M，你要是上傳100M，200M這樣子的就有點兒恐怖了，對性能方面不利，圖片的話大小沒有改變.對於PDF可使用其它方式，能夠單獨寫一個接口什麼的直接輸出也很簡單，方法以下：

header("Content-type: " . $type . ";charset=utf-8");
header('Access-Control-Allow-Headers:Origin,No-Cache,X-Requested-With,If-Modified-Since,Pragma,Last-Modified, Cache-Control,Expires,Content-Type,X-E4M-With,Authorization');
header('Access-Control-Allow-Origin:*');

echo $data;
unset($rs);

傳入ID查詢出來數據，而後以上面的方式顯示便可，$type是類型如application/pdf,$data是數據，其它的是加的跨域的。
而後直接把這個連接直接放到pdf file後面便可，也很方便。