2019-07-19 19:49:21 weixin_43225598 阅读数 547
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57520 人正在学习 去看看 李宁
在项目实践中,往往需要在线预览PDF文件。本人将项目中遇到的开发难点做以整理。方便自己,欢迎各位同仁实践交流。React小白一枚,大佬勿喷!
一、PDF文件直接预览
条件:提供的PDF访问路径(URL)是可通过浏览器直接查看的。
实现:
<iframe src={pdfURL} style={{width:'100%',height:'100%'}}></iframe>
使用<iframe></iframe>标签即可实现。src传入PDF文件的URL访问地址。style编写加载PDF文件的显示区域。frameBorder=1说明PDF显示边框值为0时不显示边框
二、加载显示PDF流文件
有时项目中并没有将可供访问的URL地址进行提供,而是将PDF流文件以接口的形式发布出来。那么我们将按照以下方法进行实现。
实现步骤
1、安装react-read-pdf包
***npm install --save react-read-pdf***
2、组件中进行引入
***import PDF from 'react-pdf-js';***
3、代码中使用(具体代码)
 import React, { PureComponent } from 'react';
    import { Button } from 'antd';
    import PDF from 'react-pdf-js';
    import styles from './style.scss';
    class OfficeView extends PureComponent {
      constructor(props) {
        super(props);
        this.state = {};
      }
      
      onDocumentComplete = (pages) => {
        this.setState({ page: 1, pages });
      }
    
      handlePrevious = () => {
        this.setState({ page: this.state.page - 1 });
      }
    
      handleNext = () => {
        this.setState({ page: this.state.page + 1 });
      }
    
      renderPagination = (page, pages) => {
        let previousButton = <div className={styles['buttonDiv']}><Button type="primary" onClick={this.handlePrevious}>上页</Button></div> ;
        if (page === 1) {
          previousButton = <div className={styles['buttonDiv']}><Button type="primary">上页</Button></div> 
        }
        let nextButton =<div className={styles['buttonDiv']}><Button type="primary" onClick={this.handleNext}>下页</Button></div>;
        if (page === pages) {
          nextButton = <div className={styles['buttonDiv']}><Button type="primary">下页</Button></div> ;
        }
        return (
          <nav>
            <div className={styles['pager']}>
              {previousButton}
              {nextButton}
            </div>
          </nav>
          );
      }
      render() {
        const {
          officeUrl
        } = this.props;
         //翻页
         let pagination = null;
        if (this.state.pages) {
          pagination = this.renderPagination(this.state.page, this.state.pages);
        }
        return (
          <div className={styles['div-Style']}>
            <div style={{overflow:'scroll',height:600}}>
                <PDF
                file={officeUrl}
                onDocumentComplete={this.onDocumentComplete}
                page={this.state.page}
                /> 
                 {pagination}
            </div>
          </div>
        );
      }
    }
    
    
    export default OfficeView;

参考链接

2018-05-13 01:28:30 weixin_37627058 阅读数 1353
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57520 人正在学习 去看看 李宁

  利用antd的Modal组件实现弹窗功能,控制图片和pdf显隐,

<Modal
    visible={visible}
    onCancel={this.onCancel}
    onOk={this.onOk}
    width="1026"
    //style={{width:1026,height:900}}
    footer={null}
>
    <div>
        {this.state.data ? this.state.data : data}
        <div id="slide-arrow-box"
             onMouseOver={this.show}
             onMouseOut={this.unshow}>
            <div
                className="slide-arrow slide-arrow-left"
            >
                <Icon type="left-circle"
                      style={{color:'#666666',display:this.state.show}}
                      onClick={this.pressLeft}
                />
            </div>
            <div
                    className="slide-arrow slide-arrow-right"
            >
                <Icon type="right-circle"
                      style={{color:'#666666',display:this.state.show}}
                      onClick={this.pressRight}
                      
                />
            </div>
        </div>
    </div>
</Modal>
通过组件的state保存变量,如果使用redux框架的可以存到框架的state中,这样可以实现对页面调用;
const visible = this.state.visible;

const path = this.state.fileData.path;
const filename = this.state.fileData.filename;
const imgData = <img id="press" src={path[0]} style={{width:980,height:950}}/>;
const iframData = <iframe className="scrolling" scrolling="no" frameBorder="0" id="press" src={path[0]} style={{width:980,height:950}}/>
const data = filename[0] && (filename[0].endsWith("pdf") || filename[0].endsWith("PDF")) ? iframData : imgData;

下面两个方法用来控制翻页箭头的显隐,上面的Icon组件就是两个箭头(需要手动写css控制一下位置);
show = () =>{
    this.setState(
        {
            show : 'block'
        }
    )
}

unshow = () => {
    this.setState(
        {
            show : 'none'
        }
    )
}

绑定鼠标事件:

下面的方法实现翻页操作:
pressRight = () => {
    const _state = this.state;
    const path = _state.fileData.path;
    const filename = _state.fileData.filename;
    _state.index ++;

    if(_state.index >= path.length){

        _state.index = 0;
    }
    let index = _state.index;
    const data = [];
    if(filename[index].endsWith("pdf") || filename[index].endsWith("PDF")){
        data.push(<iframe id="press" src={path[index]} style={{width:980,height:950}}/>)
    }else{
        data.push(<img id="press" src={path[index]} style={{width:980,height:950}}/>)
    }
    this.setState({data : data})
}
向左翻页方法类似。
绑定键盘事件,使用左右键控制翻页:
componentDidMount(){
    let shelf = this;
    window.addEventListener('keyup',function (e) {
        switch (e.keyCode){
            case 37:
                shelf.pressLeft();
                break;
            case 39:
                shelf.pressRight();
                break;
            default:
                break;
        }
    })
}

 


2019-06-06 15:16:57 song279811799 阅读数 1666
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57520 人正在学习 去看看 李宁

html导出PDF

最近做了个知识管理功能,其中有个需求是将文档导出为pdf,所以就前端实现了一下。但由于前端导出的全部是图片,文字无法复制,最终由后端实现导出。

github地址:https://github.com/eKoopmans/html2pdf.js

package.json引入"html2pdf.js": "^0.9.1"

具体代码如下:

import html2pdf from 'html2pdf.js';

exportPdf = () => {
	// 要导出的dom节点,注意如果使用class控制样式,一定css规则
    const element = document.getElementById('doc');
    // 导出配置
    const opt = {
      margin: 1,
      filename: '导出的pdf名称',
      image: { type: 'jpeg', quality: 0.98 }, // 导出的图片质量和格式
      html2canvas: { scale: 2, useCORS: true }, // useCORS很重要,解决文档中图片跨域问题
      jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' },
    };
    if (element) {
      html2pdf().set(opt).from(element).save(); // 导出
    }
  };
2019-01-19 17:13:51 nqmysbd 阅读数 277
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57520 人正在学习 去看看 李宁

1.方案一:直接预览pdf,react-pdf 加载慢,性能差,但是最简单,直接加载整个pdf

2.方案二:pdf2svg,转成图片,然后可以进行懒加载

pdf2svg <in file.pdf> <out file.svg> [<page no>]

3.方案三:模仿百度pdf2html展示,但是文档处理技术不完善

为什么要使用HTML5? BuildVu

如果您想知道为什么人们使用HTML5进行文档显示,这里有一些原因。

跨平台兼容性

PDF文件非常方便,但它们有一些限制,包括任何希望显示PDF的设备都需要下载或安装可以正确显示软件的软件。在一个更加移动的世界中,人们拥有更多设备(如笔记本电脑,平板电脑和智能手机),这比使用将PDF转换为HTML5内容的解决方案更好,这样他们就可以在任何带浏览器的设备上运行互联网?

富媒体元素支持

PDF文件可以混合嵌入其中的内容,包括音频和视频元素。HTML5有自己的结构来支持这些,而不必使用额外的插件或扩展。

4.方案四:将pdf转为swf, 还可以用flash进行展示但是兼容性差

2018-11-16 16:23:12 weixin_33795833 阅读数 238
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57520 人正在学习 去看看 李宁

由于公司项目需要,图片与文件需要存到数据库而存本地,前端用的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后面即可,也很方便。

React+Webpack打包配置

阅读数 6048

没有更多推荐了,返回首页