React项目pdf,word 预览 使用react-file-viewer插件

最近需要做一个word和pdf预览的功能，因为基础的技术栈是 react，于是就选用了 react-file-viewer 这个插件.
其实这个插件，还支持更多文件格式

• Images: png, jpeg, gif, bmp, including 360-degree images
• pdf
• csv
• xslx
• docx
• Video: mp4, webm
• Audio: mp3

安装

npm i react-file-viewer

ps: 如果React版本小于16，需要安装 0.5版本的 react-file-viewer，

npm install react-file-viewer@0.5.0

使用

import React from 'react'
import FileViewer from 'react-file-viewer'

const View = () => {
  const filePath = 'http://xxx.docx' || 'http://ccc.pdf'
  const type = filePath.split('.')[filePath.split('.').length - 1]
  
  return (
     <div className='view'>
      {type ? (
        <FileViewer
          fileType={type}
          filePath={filePath}
          errorComponent={''}
          onError={err => console.log(err)}
        />
      ) : (
        <div style={{ textAlign: 'center' }}>暂无文件预览</div>
      )}
    </div>
  )
}

样式说明

到上面那一步就只是如何使用，但其实，比如说docx格式，就只是将文本内容读取到了 html 页面上，pdf格式也只是将canvas渲染到页面上。
都没有一页一页 的样式。所以针对这两个格式，加了对应的样式

其实就是 加一下阴影和居中等，让其看起来像 一页一页 的 格式。

而且，还要实现，不可下载，复制，打印，并需要加水印等功能。因为系统本身所有页面都有水印，就没有重复去做工作。具体实现之后可以单独讲一讲。

• 不可下载（另存为）：
  <noscript><iframe src="*.htm"></iframe></noscript>

• 不可复制：
  css 实现，在 文件上方遮一层，实现不可复制

• 不可打印：
  css 实现，打印出的页面内容将为空白
  @media print{div{display:none}}

总体实现：

.view {
  -moz-user-select:none; /* Firefox私有属性 */
  -webkit-user-select:none; /* WebKit内核私有属性 */
  -ms-user-select:none; /* IE私有属性(IE10及以后) */
  -khtml-user-select:none; /* KHTML内核私有属性 */
  -o-user-select:none; /* Opera私有属性 */
  user-select:none; /* CSS3属性 */
  margin: 6rem 0;
  // pdf 页面样式
  :global(.pdf-viewer-container) {
    text-align: center;
  }
  canvas {
    border: 0.0714rem solid #ccc;
    box-shadow: 0rem 0.29rem 1.29rem 0rem rgba(38, 38, 38, 0.1);
  }
  // docx 页面样式
  :global(.document-container) {
    border: 0.0714rem solid #ccc;
    box-shadow: 0rem 0.29rem 1.29rem 0rem rgba(38, 38, 38, 0.1);
    min-height: 80rem;
  }
  // 不可打印+
  @media print{ 
    div {
      display: none;
    } 
  } 
}
// 在 文件上方遮一层，实现不可复制
.view {
  position: relative;
}
.view::before{
	content:'';
	width:100%;
	height:100%;
	position:absolute;
	z-index:1000;
	background-color:#fff;
	opacity:0;
	top:0;
	left:0;
}

这样其实只是从表面实现了不允许复制，打印，保存等，因为使用的是 css和 js的方式，那如果用户在控制台禁用js，以及去修改css，那照样还是可以去复制和下载的。

所以这种方式也不是绝对的，之后如果有更好一些的方式，再更新吧~