手机端pdf文件预览-后端返回文档流场景（pdfjs-dist+@pzy915/pdf-preview）

1. 首先要安装依赖包

yarn add pdfjs-dist@2.12.313  //注意这个包的版本必须是这个
yarn add @pzy915/pdf-preview

2. 因为使用该组件需要配置workerSrc和cMapUrl, 所以，并未将pdfjs-dist@2.12.313本身打包进该组件，因此需要在自己向项目中安装pdfjs-dist@2.12.313, 并按如下方式配置到你的公共静态资源目录

我自己的项目是如下路径

public\pdfjs-dist-workspace

3. 拷贝node_modules/pdfjs-dist/build, node_modules/pdfjs-dist/build/cmaps 两个文件夹到自己刚刚创建的那个目录下面

import { loadPdfAndRender } from './PdfUtil'
// 渲染函数 flowData就是后端返回的数据流 注意这里需要设置数据流返回的  responseType: 'arraybuffer',才能生效，否则预览的时候就会出现空白页面
const pdfViewer = ()=>{
 const pdfPreviewRef = document.getElementById('pdfPreviewRef')
 const [scale, setscale] = useState(0.8)

 const renderPdf = () => {
    if (!pdfPreviewRef) return
    let blob = new Blob([flowData], {
      type: 'application/pdf;charset=utf-8'
    })
    blob.arrayBuffer().then((e) => {
      loadPdfAndRender({
        data: new Uint8Array(e),
        scale,
        pdfRenderContainerDom: pdfPreviewRef,
      })
    })
  }

return (<div id='pdfPreviewRef' className={styles.pdfPreviewRef}></div>)

}
export default pdfViewer

        上面代码中loadPdfAndRender所传参数是预览的配置，点击源码进去可以看到可以配置的参数和具体示意如下：

{
    /**
     * 初始化完成之后立刻渲染第一页. 默认:true
     * 该属性用于连续渲染
     */
    inintedRender?: boolean;
    /**
     * pdf地址
     */
    pdfUrl?: string;
    /**
     * pdf的流数据
     */
    data?: TypedArray;
    /**
     * 承载显示pdf内容的html元素
     */
    pdfRenderContainerDom: HTMLElement;
    /**
     * 缩放比例. 1表示100%, 0.5表示50%, 1.5表示150%. 最低0.5, 最高不限制. 不填默认为: 1.5
     */
    scale?: number;
    /**
     * 强制保持pdf每页宽度为width指定的宽度(原本页宽大于width的会收缩,否则会拉伸), 设置了width之后, scale设置将无效
     */
    width?: number;
    /**
     * 是否携带凭证(cookie信息). 不填表示false
     */
    withCredentials?: boolean;
    /**
     * 自定义请求头. 可选
     */
    httpHeaders?: Record<string, unknown>;
    /**
     * 每页pdf渲染完毕之后的自定义回调函数。会在每页pdf渲染完成之后插入界面之前进行调用
     *
     * @param   {PdfCanvasInfoType}  pdfPageCanvasInfo  当前页pdf渲染完毕后的canvas信息
     *
     */
    pdfPageRenderCall?: (pdfPageCanvasInfo: PdfCanvasInfoType) => void;
}

4. PdfUtil文件是我拷贝源码的内容，内容如下：

import {
  PdfjsDistConfigType,
  pdfPreviewBuilder,
  PdfPreviewConfig,
} from '@pzy915/pdf-preview'

const pdfjsDistRes = 'pdfjs-dist-workspace'
const workerSrc = `${pdfjsDistRes}/build/pdf.worker.js`
const cMapUrl = `${pdfjsDistRes}/cmaps/`

const pdfjsDistConfig: PdfjsDistConfigType = {
  workerSrc,
  cMapUrl,
}

const pdfPreview = pdfPreviewBuilder(pdfjsDistConfig)

/**
 * 加载pdf文件，并完整渲染
 *
 * @param pdfUrl pdf地址
 * @param scale 缩放比
 * @param pdfRenderContainerDom 渲染pdf的容器dom节点
 */
export async function loadPdfAndRender(pdfConfig: PdfPreviewConfig) {
  return pdfPreview.loadPdfAndRender(pdfConfig)
}

/**
 * 获取pdf预览的操作信息
 *
 * @param pdfConfig pdf预览配置信息
 */
export function loadPdfDocOperateInfo(pdfConfig: PdfPreviewConfig) {
  return pdfPreview.loadPdfDocOperateInfo(pdfConfig)
}

/**
 *
 * @return  {HTMLCanvasElement}  
 */
export function drawWatermark(waterMark) {
  const canvas = document.createElement('canvas')
  canvas.width = 200
  canvas.height = 200

  const ctx = canvas.getContext('2d')
  if (!ctx) return
  ctx.rotate((-18 * Math.PI) / 180)
  ctx.font = '14px Vedana'
  ctx.fillStyle = '#ffccc7'
  ctx.textAlign = 'left'
  ctx.textBaseline = 'middle'
  ctx.fillText(waterMark, 0, 50)

  return canvas
}

4. 最后就可以成功啦

        

如果有缩放需求，可以自己改变scale的值来进行缩放

整理不易，如能帮到您，留下您宝贵一赞~