React pdf.js 在线预览，禁止复制，禁止打印下载

2022-07-14 918 阅读2分钟

有效参考链接

#掘金 Vue pdf.js在线预览添加水印并禁用打印功能 #CSDN vue项目中使用pdf.js预览pdf文件

pdfjs方法使用一

1.官网下载

通过官网链接进行下载稳定版本，我下载的版本是 2.14.305

直接解压后，访问 web/viewer.html可能会报错...

2.创建 PdfView 组件

将下载内容放置再 public/statics/pdfjs 内

创建组件文件夹 PdfView, index.tsx 内通过 iframe 访问 public/statics/pdfjs内的 viewer.html 在通过 ?file={xxx}访问具体的 pdf 文件

import React from 'react'

const PDFRender: React.FC<{ src: string }> = ({ src }) => {
  return (
    <iframe
      style={{ width: '100%', height: '100%' }}
      src={`/statics/pdfjs/web/viewer.html?file=${src}`}
    ></iframe>
  )
}

export default PDFRender

这时候，你可能发现，打不开...，可能存在的问题有：

访问的 pdf 文件跨域了，可通过后台进行跨域配置CROS，或者 ngnix 代理
直接访问浏览器可直接打开的链接(eg：www.nhc.gov.cn/old_file/up… )

但提示 file origin does not match viewer's

针对问题二，简单粗暴的在viewer.js内，找到file origin does not match viewer's然后注释。就可以了(针对版本2.14.305)。

3.坑

找资料的时候，就想不明白，为啥我直接用viewer.html?file=xxx直接打开会报错？？？？，后来就找到了一个博主的demo，用博主demo中static/下面的插件内容，可以直接打开pdf。

可能更新版本，不更新文档？

4.禁止复制，打印，下载

直接在 viewer.html 内将打印、下载对应的图标进行隐藏

可直接参考：#掘金 Vue pdf.js在线预览添加水印并禁用打印功能

pdfjs 方法使用二

将pdf转为 canvas 显示

1. 下载

npm官网内的pdfjs-dist

yarn add pdfjs-dist

2. 创建 PdfPicView 组件

参考链接，链接内配的图片跟实际效果有较大的偏差

可在github上找到 demo

需要进行样式调整
文件太大时，转换需要一段时间

友情链接：