react前端显⽰图⽚_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 = 上⼀页;
if(previous === 1){
previousButton = ⾸页;
}
let nextButton = 下⼀页;
if(previous === next){
nextButton = 最后⼀页;
}
return {previousButton}{nextButton} 第{previous}页 共{next}页;
}
return(
file={apiManager.pdf + this.state.id}
onDocumentComplete={DocumentComplete}
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 是从数据库中取出来的图⽚字段取到的数据
如果要显⽰pdf直接application/pdf;basa64,...
不过个⼈不建议pdf使⽤这种⽅式，因为pdf转成这种格式后，会⽐你上传的⽂件⼤8倍。也就是你传1M，数据库存的是8M，你要是上传100M，200M这样⼦的就有点⼉恐怖了，对性能⽅⾯不利，图⽚的话⼤⼩没有改变.对于PDF可以使⽤其它⽅式，可以单独写⼀个接⼝什么的直接输出也很简单，⽅法如下：
react native 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后⾯即可，也很⽅便。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。