React 移动端项目之pdf预览

因为项目需要，需要在在项目中实现pdf文件遇见功能，众所周知，安卓老大哥貌似不怎么支持，所以采用的react-pdf插件实现方式，实现方式很简单：

一：引入react-pdf包：

yarn add react-pdf 或者npm install react-pdf --save

二：封装pdf组件：（官网demo）

import React, { Component } from 'react';

import { Document, Page } from 'react-pdf';

//如果报错

Uncaught SyntaxError: Unexpected token <
index.js:1452

Error: Setting up fake worker failed: "Cannot read property 'WorkerMessageHandler' of undefined".at pdf.js:10999

//就增加这两句

import { pdfjs } from 'react-pdf';

pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

class MyApp extends Component {

state = {

numPages: null,

pageNumber: 1,

}

onDocumentLoadSuccess = ({ numPages }) => {

this.setState({ numPages });

}

render() {

const { pageNumber, numPages } = this.state;

return (

<div>

<Document

file="somefile.pdf"

onLoadSuccess={this.onDocumentLoadSuccess}

page = {pageNumber}

</Document>

<p>Page {pageNumber} of {numPages}</p>

</div>

);

}

奉上官网demo地址https://www.npmjs.com/package/react-pdf

需求暂时可以实现，但是不完美的是这个插件实现的是pdf文件分页预览法，以为这不能够常预览，想预览下页，就需要自己做分页，改变page属性的值，后期想的解决办法就是滚动翻页代替点击翻页，虽然还是单页预览但是稍微比点击翻页好点，后期小编突发奇想，渲染多个封装的pdf组件，每个组件只显示一页pdf内容，尝试了下还是可以实现常预览的，至于性能方面，小编的意思是在加载完第一页之后在渲染之后的，防止一次加载同一文件多次，浪费性能

React 移动端项目之pdf预览相关推荐

pdfh5.js 基于pdf.js和jQuery，web/h5/移动端PDF预览手势缩放插件。
pdfh5.js 基于pdf.js和jQuery,web/h5/移动端PDF预览手势缩放插件. 注意:本地绝对路径地址不能加载,跨域问题用代理或者服务端解决. svg模式渲染存在缺陷,只能渲染普通pd ...
react pdf预览
pdf预览很强大的插件是pdf.js,这是原生js实现的插件,能兼容大部分浏览器,对于它的使用方法,在传统的web项目中就是viewer.html?file="文件名称",但是对于 ...
vue项目实现前端预览word和pdf格式文件
最近做vue项目遇到一个需求,就是前端实现上传word或pdf文件后,后端返回文件对应的文件流,前端需要在页面上展示出来.word预览简单一些,pdf预览我试过pdfjs,vue-pdf总是报各种奇奇 ...
实现Vue移动端的PDF预览
最近做到一个功能,PDF预览:这个功能看着蛮简单的,结果搞了两个下午,真是欲哭无泪.记录一下所查到的预览方法. 我在网上找了蛮多教程的,大致都是以下几个方法实现预览: 使用 iframe 标签使用 ...
vue 项目中实现pdf预览 pdf打印 pdf下载
在Vue项目中实现PDF预览.打印和下载可以通过以下步骤来实现: 安装pdf.js pdf.js是一个JavaScript库,可以用于在Web上渲染PDF文件. 可以使用npm安装pdf.js,命令如 ...
pdf预览在vue项目中的使用兼容ie浏览器
最近做项目有需求需要pdf在线预览并支持下载,而且还要兼容ie浏览器,之前又是使用过vue-pdf插件在chrome上没有问题但是在ie上不兼容.最后使用了pdf.Js这个原生库,虽然网上有许多使用教 ...
PDF 预览和下载你是怎么实现的？
在开发过程中要求对 PDF 类型的发票提供预览和下载功能,**PDF** 类型文件的来源又包括 H5 移动端和 **PC 端**,而针对这两个不同端的处理会有些许不同,下文会有所提及. 针对 ...
vue移动端实现excel在线预览
上篇博客我提到了ios手机不能实现下载功能,但是可以实现预览,图片预览和pdf预览我已经在前篇博客做了讲解,但是,在工作中大家上传最多的应该是excel的文件,今天我就讲解一下excel移动端的预览实 ...
Android PDF原生实现 PDF阅读、PDF手势伸缩、PDF目录、PDF预览缩略图 PDF方案选择 google doc android-pdfview mupdf pdf.js x5
##1.背景近期,公司希望实现安卓原生端的PDF功能,要求:高效.实用. 经过两天的调研.编码,实现了一个简单Demo,如上图所示. 关于安卓原生端的PDF功能实现,技术点还是很多的,为了咱们安卓开 ...

React 移动端项目之pdf预览

React 移动端项目之pdf预览相关推荐

最新文章

热门文章