国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

Alfred / 2792人閱讀

摘要：由于公司項(xiàng)目需要，圖片與文件需要存到數(shù)據(jù)庫(kù)而存本地，前端用的，后端是接口的方式，只能選擇這種方式，而且也方便可以存各種格式。下安裝官網(wǎng)大家可以點(diǎn)進(jìn)去，然后里面有介紹安裝方法如何使用。

由于公司項(xiàng)目需要，圖片與文件需要存到數(shù)據(jù)庫(kù)而存本地，前端用的react，后端 是接口的方式，只能選擇base64這種方式，而且也方便可以存各種格式。

1.React下react-pdf-js安裝
官網(wǎng)

大家可以點(diǎn)進(jìn)去，然后里面有介紹安裝方法如何使用。

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 = ;
            if(previous === 1){
                previousButton = ;
            }
            let nextButton = ;
            if(previous === next){
                nextButton = ;
            }

            return {previousButton}{nextButton}  第{previous}頁 共{next}頁;
        }
                
        return(
                    
        )
    }
}

然后分頁有部分我沒有按他官網(wǎng)的來我是自己寫的,因?yàn)槲矣X得官網(wǎng)的寫得太多了，大家可以參考一下

3.React 采用base64顯示圖片
由于我是做PHP的，后臺(tái)接口與前端都是自己寫的，這里只介紹php的方法。我也看過網(wǎng)上的一些方法，我不知道為什么那些人會(huì)寫得那么麻煩，一條語句的問題，寫了一大片，而且還有問題。代碼如下:
后臺(tái)代碼:

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

直接使用chunk_split(base64_encode(讀取的圖片));直接就可以化為base64然后存到數(shù)據(jù)庫(kù)，即可

React顯示:

//imageSrc 是從數(shù)據(jù)庫(kù)中取出來的圖片字段取到的數(shù)據(jù)

如果要顯示pdf直接application/pdf;basa64,...
不過個(gè)人不建議pdf使用這種方式，因?yàn)閜df轉(zhuǎn)成這種格式后，會(huì)比你上傳的文件大8倍。也就是你傳1M，數(shù)據(jù)庫(kù)存的是8M，你要是上傳100M，200M這樣子的就有點(diǎn)兒恐怖了，對(duì)性能方面不利，圖片的話大小沒有改變.對(duì)于PDF可以使用其它方式，可以多帶帶寫一個(gè)接口什么的直接輸出也很簡(jiǎn)單，方法如下：

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查詢出來數(shù)據(jù)，然后以上面的方式顯示即可，$type是類型如application/pdf,$data是數(shù)據(jù)，其它的是加的跨域的。
然后直接把這個(gè)鏈接直接放到pdf file后面即可，也很方便。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/29658.html

相關(guān)文章

  • 使用jquery-webcam插件，實(shí)現(xiàn)人臉采集并轉(zhuǎn)base64

    摘要：項(xiàng)目需求在或?yàn)g覽器下，調(diào)用電腦攝像頭確保使用的是筆記本電腦，或者攝像頭功能正常使用的臺(tái)式機(jī)，進(jìn)行人臉圖像采集預(yù)覽，并將圖片的碼傳入到后臺(tái)進(jìn)行后續(xù)操作。該適用于和以上，以下版本的未測(cè)試。前期插件準(zhǔn)備版本以上即可地址作者主頁地址這里。 項(xiàng)目需求：在ie或chrome瀏覽器下，調(diào)用電腦攝像頭（確保使用的是筆記本電腦，或者攝像頭功能正常使用的臺(tái)式機(jī)），進(jìn)行人臉圖像采集預(yù)覽，并將圖片的base6...

    chenatu 評(píng)論0 收藏0

  • 使用jquery-webcam插件，實(shí)現(xiàn)人臉采集并轉(zhuǎn)base64

    摘要：項(xiàng)目需求在或?yàn)g覽器下，調(diào)用電腦攝像頭確保使用的是筆記本電腦，或者攝像頭功能正常使用的臺(tái)式機(jī)，進(jìn)行人臉圖像采集預(yù)覽，并將圖片的碼傳入到后臺(tái)進(jìn)行后續(xù)操作。該適用于和以上，以下版本的未測(cè)試。前期插件準(zhǔn)備版本以上即可地址作者主頁地址這里。 項(xiàng)目需求：在ie或chrome瀏覽器下，調(diào)用電腦攝像頭（確保使用的是筆記本電腦，或者攝像頭功能正常使用的臺(tái)式機(jī)），進(jìn)行人臉圖像采集預(yù)覽，并將圖片的base6...

    cnio 評(píng)論0 收藏0

  • zx-editor 移動(dòng)端（HTML5）富文本編輯器，可與原生App混合(hybrid)開發(fā)

    摘要：移動(dòng)端文檔富文本編輯器，支持圖文混排引用大標(biāo)題無序列表，字體顏色加粗斜體。可用于獨(dú)立項(xiàng)目開發(fā)，也可以用于與原生混合開發(fā)。，圖片文件最大尺寸限制，單位，默認(rèn)，編輯器左右內(nèi)邊距，默認(rèn)像素，是否顯示底部工具欄圖片標(biāo)簽連接添加等圖標(biāo)。 ZxEditor 移動(dòng)端HTML文檔（富文本）編輯器，支持圖文混排、引用、大標(biāo)題、無序列表，字體顏色、加粗、斜體。 可用于獨(dú)立web項(xiàng)目開發(fā)，也可以用于與原生A...

    lansheng228 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<