如何在react-pdf-highlighter中随PDF URL传递授权请求头？

react-pdf-highlighter基于PDF.js开发，虽然官方未直接提供请求头配置选项，但可以通过以下两种方式实现需求：

方法一：自定义PDF文档加载逻辑 #

直接使用PDF.js的getDocument方法带上请求头，再将加载完成的文档实例传给react-pdf-highlighter的document属性：

1. 导入PDF.js库

import * as pdfjsLib from 'pdfjs-dist'

2. 配置PDF.js Worker（若未全局配置过）

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

3. 编写带请求头的文档加载函数

const loadPdfWithHeaders = async (pdfUrl, authHeaders) => {
  return pdfjsLib.getDocument({
    url: pdfUrl,
    httpHeaders: authHeaders // 传入授权头，比如 { Authorization: 'Bearer xxx' }
  }).promise
}

4. 在组件中加载文档并传入高亮组件

import { useState, useEffect } from 'react'
import { PdfHighlighter } from 'react-pdf-highlighter'

const YourPdfHighlighter = () => {
  const [pdfDoc, setPdfDoc] = useState(null)
  const PDF_URL = '你的PDF资源地址'
  const AUTH_HEADERS = { Authorization: 'Bearer your-auth-token' }

  useEffect(() => {
    const fetchPdf = async () => {
      const doc = await loadPdfWithHeaders(PDF_URL, AUTH_HEADERS)
      setPdfDoc(doc)
    }
    fetchPdf()
  }, [])

  if (!pdfDoc) return <div>加载中...</div>

  return (
    <PdfHighlighter
      document={pdfDoc}
      onSelectionChange={(selections) => console.log(selections)}
      // 其他必要属性，如renderHighlight等
    />
  )
}

export default YourPdfHighlighter

方法二：全局拦截PDF.js的请求 #

如果应用内所有PDF加载都需要携带请求头，可以替换PDF.js的fetch方法，全局添加请求头：

import * as pdfjsLib from 'pdfjs-dist'

// 保存原始fetch方法
const originalFetch = pdfjsLib.fetch

// 替换为带自定义头的fetch
pdfjsLib.fetch = async (url, options) => {
  const modifiedOptions = {
    ...options,
    headers: {
      ...options?.headers,
      Authorization: 'Bearer your-auth-token' // 此处添加授权头
    }
  }
  return originalFetch(url, modifiedOptions)
}

注意事项 #

• 确保使用的PDF.js版本与react-pdf-highlighter依赖的PDF.js版本一致，避免兼容性问题
• 若PDF资源来自跨域服务器，需确保服务器配置了正确的CORS规则，允许携带自定义请求头

内容的提问来源于stack exchange，提问作者Malcolm G