2019-03-20 10:57:54 nowsdt 阅读数 811
  • 2019 react入门至高阶实战,含react hooks

    这是2019 react入门到高级新课程 学习react,不仅能带来技术提升,同时提高开发效率和体验,更能带来好的就业机会。 本课程主要分为以下几个部分:  一,前端工程化基础?  主要学习node和npm、yarn的基本用法  二,es6语法 学习必备的es6常用语法 。 三,react基础知识  学习如何搭建react项目,以及react组件,jsx语法、css处理方案、生命周期等基础知识。 并且根据这些知识开发一个个人网站。 四,react进阶知识?? 学习表单的处理,事件处理,Portals的使用,以及数据请求和API管理等进阶知识。 五,react高阶知识?? 学习react高级特性,react hooks,以及整个react生态体系的构成和应用 。 努力学习哟,带你精通react。

    1958 人正在学习 去看看 梁富城

React学习手册,React学习手册PDF

React学习手册中文版,React学习手册中文版PDF

React学习手册,React学习手册pdf,React学习手册-14393339,React学习手册-14393339pdf

Alex,Banks,Eve,Porcello 著,邓世超 译

 

下载地址:

https://download.csdn.net/download/nowsdt/11038646

 

2019-11-15 17:32:36 ime33 阅读数 80
  • 2019 react入门至高阶实战,含react hooks

    这是2019 react入门到高级新课程 学习react,不仅能带来技术提升,同时提高开发效率和体验,更能带来好的就业机会。 本课程主要分为以下几个部分:  一,前端工程化基础?  主要学习node和npm、yarn的基本用法  二,es6语法 学习必备的es6常用语法 。 三,react基础知识  学习如何搭建react项目,以及react组件,jsx语法、css处理方案、生命周期等基础知识。 并且根据这些知识开发一个个人网站。 四,react进阶知识?? 学习表单的处理,事件处理,Portals的使用,以及数据请求和API管理等进阶知识。 五,react高阶知识?? 学习react高级特性,react hooks,以及整个react生态体系的构成和应用 。 努力学习哟,带你精通react。

    1958 人正在学习 去看看 梁富城

上个迭代接了一个业务需求,需要在PC应用中可以直接预览pdf文件,于是在社区找了几个React组件,

A、react-pdf-js

B、react-pdf 

C、React-read-pdf (移动端设备)

三款插件都使用了下,最后采用了react-pdf,相对而言它的插件功能较为强大,文档使用非常清晰,作者对issues回复也非常及时,社区也比较活跃;

一、cnpm install react-pdf --save 安装插件

二、import { Document,Page } from 'react-pdf'; 插件引入

三、<Document file="fileUrl"/> 文件引入

四、 在Document里层添加<Page/> 

附上代码:

<Document
          title={pdfTitle || undefined}
          file={pdfUrl}
          onLoadSuccess={this.onDocumentLoadSuccess}
          loading="努力加载中..."
          renderMode="canvas"
          options={{
            cMapUrl: 'cmaps/',
            cMapPacked: true,
          }}
        >
          <Page 
            pageNumber={pageNumber} 
            width={720} 
            loading="努力加载中..."
            renderMode="canvas"
            renderInteractiveForms={true}
          />
        </Document>

注意点:

1、因为是在webpack中的,所以导入方式需要 

import { Document } from 'react-pdf/dist/entry.webpack';

2、控制台报警告或pad文件显示不完整,内容缺失:

Warning: The CMap "baseUrl" parameter must be specified, ensure that the "cMapUrl" and "cMapPacked" API parameters are provided    

需要支持非拉丁字符,下载插件

npm install copy-webpack-plugin --save-dev

在webpack中配置 ,引入:

import CopyWebpackPlugin from 'copy-webpack-plugin';

plugins配置:

new CopyWebpackPlugin([
  {
    from: 'node_modules/pdfjs-dist/cmaps/',
    to: 'cmaps/'
  },
]),

最后在组件的Document中添加配置:

<Document
  options={{
    cMapUrl: 'cmaps/',
    cMapPacked: true,
  }}
/>

配置支持插件方式也有另外一种,它提供的cdn的远程资源包也可以使用,

cMapUrl: `//cdn.jsdelivr.net/npm/pdfjs-dist@${pdfjs.version}/cmaps/`,

如果还是不能预览,需要看下pdf中原件是否存在交互式表单,如果是按照作者建议是需要开启强制渲染模式renderInteractiveForms={true} 

强调下,react-pdf的github上的接口文档中,提供了很多的属性设置以及回调函数以供开发者使用,https://github.com/wojtekmaj/react-pdf

当然了,翻页跳页功能是需要自行拓展的,直接控制pageNumber的值就好了,

以上,谢谢,希望对您有点帮助!

 

2019-05-10 15:46:22 zhongmei121 阅读数 2165
  • 2019 react入门至高阶实战,含react hooks

    这是2019 react入门到高级新课程 学习react,不仅能带来技术提升,同时提高开发效率和体验,更能带来好的就业机会。 本课程主要分为以下几个部分:  一,前端工程化基础?  主要学习node和npm、yarn的基本用法  二,es6语法 学习必备的es6常用语法 。 三,react基础知识  学习如何搭建react项目,以及react组件,jsx语法、css处理方案、生命周期等基础知识。 并且根据这些知识开发一个个人网站。 四,react进阶知识?? 学习表单的处理,事件处理,Portals的使用,以及数据请求和API管理等进阶知识。 五,react高阶知识?? 学习react高级特性,react hooks,以及整个react生态体系的构成和应用 。 努力学习哟,带你精通react。

    1958 人正在学习 去看看 梁富城

pdf预览很强大的插件是pdf.js,这是原生js实现的插件,能兼容大部分浏览器,对于它的使用方法,在传统的web项目中就是viewer.html?file="文件名称",但是对于react项目来说,pdf.js的文件要放在静态文件夹下,文件较大,也尝试使用npm install pdfjs-dist安装,但是按照官方的例子传文件的base64编码时显示不出来,下载官方的代码在浏览器查看它的例子也显示不成功,不知道什么原因,花了好多时间也没解决,最后还是使用react-pdf,gitHub地址:https://github.com/wojtekmaj/react-pdf

查看react-pdf安装包发现react-pdf也是引用了pdf.js,使用react-pdf的写法传文件的base64编码可以正常显示出来。

自己调一下样式,分页使用ant-design的分页组件,显示效果如下:

后台返回的pdf文件数据:

后台返回的是文件流二进制数据,预览是新开的窗口,关键代码

stream.blob().then(blob => {//stream 后台返回的数据
            const r = new FileReader(); // 读取file对象,提取图片base64编码,用于预览
            r.readAsDataURL(blob);
            r.onload = e => {
              const eurl = e.target.result;
              const myWindow = window.open('/preview', '_blank');// 新开窗口跳转到preview.js
              myWindow.onload = () => myWindow.postMessage(eurl, window.origin)// 页面加载完传pdfbase64编码参数过去
            };          
});

 

预览页面的代码:preview.js

import React, { Component, Fragment } from 'react';
import { Document, Page } from 'react-pdf';
import { Pagination } from 'antd'

import styles from './Preview.less'

class Preview extends Component{
  state={
    pdfBase64:null,
    numPages:0,
    pageNumber:1
  }

  componentDidMount(){
    window.addEventListener('message', (event) => {
      this.setState({pdfBase64:event.data})
    }, false)
  }

  onDocumentLoad = ({ numPages }) => {
    this.setState({ numPages });
  }

  onChangePage=(page)=>{
    this.setState({ pageNumber:page });
  }

  render(){
    const {pdfBase64,numPages,pageNumber} = this.state
    return(
      <Fragment>
        <Document
          className={styles.preview}
          onLoadSuccess={this.onDocumentLoad}
          file={pdfBase64}
          renderMode='svg'
        >
          <Page className={styles.page} pageNumber={pageNumber} scale={1.5} />
        </Document>
        <Pagination
          className={styles.pagination}
          total={numPages}
          showTotal={total => `共 ${total} 页`}
          current={pageNumber}
          pageSize={1}
          size='small'
          onChange={this.onChangePage}
        />
      </Fragment>
    )
  }

}

export default Preview

出现一些问题。。。。

有些文档字体出现很怪异的现象:

后来发现把用svg渲染改成canvas就可以了。

<Document
            className={styles.preview}
            onLoadSuccess={this.onDocumentLoad}
            file={pdfBase64}
            renderMode='canvas'
          >
            <Page className={styles.page} pageNumber={pageNumber} scale={scale} />
          </Document>

 

2019-12-11 10:03:23 qq_41985467 阅读数 4
  • 2019 react入门至高阶实战,含react hooks

    这是2019 react入门到高级新课程 学习react,不仅能带来技术提升,同时提高开发效率和体验,更能带来好的就业机会。 本课程主要分为以下几个部分:  一,前端工程化基础?  主要学习node和npm、yarn的基本用法  二,es6语法 学习必备的es6常用语法 。 三,react基础知识  学习如何搭建react项目,以及react组件,jsx语法、css处理方案、生命周期等基础知识。 并且根据这些知识开发一个个人网站。 四,react进阶知识?? 学习表单的处理,事件处理,Portals的使用,以及数据请求和API管理等进阶知识。 五,react高阶知识?? 学习react高级特性,react hooks,以及整个react生态体系的构成和应用 。 努力学习哟,带你精通react。

    1958 人正在学习 去看看 梁富城

接着上面的todolist.js文件做一些小修改:

import React, { Component } from 'react';
import '../assets/css/index.css'

//引入自定义模块
import storage from '../model/storage';

class Todolist extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            username:"111",
            list:[
                {
                    title:"录制ionic",
                    checked:true
                },
                {
                    title:"录制nodejs",
                    checked:false
                },
                {
                    title:"录制vue",
                    checked:false
                },
                {
                    title:"录制angularjs",
                    checked:false
                },
            ]
         };
    }
  
    removeData=(key)=>{
        // alert(key)
        var templateList=this.state.list;
        templateList.splice(key,1)
        this.setState({
            list:templateList
        })
        //执行缓存数据
        // localStorage.setItem('todolist',JSON.stringify(templateList))
        storage.set('todolist',templateList)
    }

    addData=(e)=>{
        //按下回车的时候下方添加事件
        if(e.keyCode==13){
            // alert(title)
            let title=this.refs.title.value
            let templateList=this.state.list;
            templateList.push({
                title:title,
                checked:false
            })

            //改变后的值赋值给list
            this.setState({
                list:templateList
            })
            this.refs.title.value=""   //表单置为空

            //执行缓存数据
            storage.set('todolist',templateList)
        }
        
    }

    checkboxChange=(key)=>{
        let templateList =this.state.list;
        templateList[key].checked=!templateList[key].checked      
        this.setState({
            list:templateList
        })
        //执行缓存数据
        storage.set('todolist',templateList)
    }

    //生命周期函数 页面加载就会触发
    componentDidMount(){
        //获取缓存的数据
        var todolist=storage.get('todolist')
        if(todolist){
            this.setState({
                list:todolist
            })
        }
    }

    render() {
        return (
            <div>

            <header className="title">Todolist:<input ref="title" onKeyUp={this.addData} /></header>
            
            <h2>待办事项</h2>

            <hr />

            <ul>
            {
                this.state.list.map((value,key)=>{
                    if(!value.checked){
                        return(
                            <li key={key}> 
                                <input type="checkbox"  checked={value.checked} onChange={this.checkboxChange.bind(this,key)} />
                                {value.title+"        "}
                                <button onClick={this.removeData.bind(this,key)}>删除</button>
                            </li>
                            
                        )
                    }
                })
            }

            </ul>
           

            <h2>已完成事项</h2>
            <hr></hr>
            <ul>
            {
                this.state.list.map((value,key)=>{
                    if(value.checked){
                        return(
                            <li key={key}>
                                <input type="checkbox" checked={value.checked} onChange={this.checkboxChange.bind(this,key,value.checked)} />

                                {value.title+"        "}
                                <button onClick={this.removeData.bind(this,key)}>删除</button>
                            </li>
                            
                        )
                    }
                })
            }

            </ul>
            </div>
            
        );
    }
}

export default Todolist;

对于执行页面数据缓存有两种方式:
1、直接在页面进行本地保存:localStorage.setItem(‘todolist’,JSON.stringify(templateList)),可以在浏览器页面进行检查network中的Local Storage查看到数据
2、通过外部储存,封装成一个storage。
storage.js:

var storage={
    set(key,value){
        localStorage.setItem(key,JSON.stringify(value));
    },
    get(key){
        return JSON.parse(localStorage.getItem(key));
    },
    remove(key){
        localStorage.removeItem(key);
    }
};

export default storage;
2019-08-28 16:53:39 jiang480630 阅读数 40
  • 2019 react入门至高阶实战,含react hooks

    这是2019 react入门到高级新课程 学习react,不仅能带来技术提升,同时提高开发效率和体验,更能带来好的就业机会。 本课程主要分为以下几个部分:  一,前端工程化基础?  主要学习node和npm、yarn的基本用法  二,es6语法 学习必备的es6常用语法 。 三,react基础知识  学习如何搭建react项目,以及react组件,jsx语法、css处理方案、生命周期等基础知识。 并且根据这些知识开发一个个人网站。 四,react进阶知识?? 学习表单的处理,事件处理,Portals的使用,以及数据请求和API管理等进阶知识。 五,react高阶知识?? 学习react高级特性,react hooks,以及整个react生态体系的构成和应用 。 努力学习哟,带你精通react。

    1958 人正在学习 去看看 梁富城

1.安装

yarn add react-pdf-js

2.引入

import PDF from 'react-pdf-js';

3.直接显示pdf文件

const pdfurl = require("../components/读后感.pdf");

<PDF file={pdfurl} scale={0.5}/>

4.通过点击按钮显示pdf文件

const pdfurl = require("../components/读后感.pdf");

<Button type="primary" onClick={this.handleBtnQuery}>查看协议</Button>

handleBtnQuery=()=>{
   window.open(pdfurl,'_parent')
}

这样就可以了哦!赶快试试吧!
主页传送门

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