如何用react-pdf-viewer或其他带搜索按钮的库加载URL中的PDF？

react-pdf-viewer完全支持通过远程URL加载PDF文件，你不需要更换其他库。

你的当前代码是通过require加载本地静态PDF资源，这本身也是一种URL（打包后会转换为静态文件的访问路径）。要加载远程URL的PDF，只需要直接将fileUrl的值替换为目标PDF的远程HTTP/HTTPS地址即可。

修改后的示例代码 #

return (
  <Worker workerUrl="https://unpkg.com/pdfjs-dist@2.6.347/build/pdf.worker.min.js">
    <div style={{ height: "720px", marginTop: "120px" }}>
      <Viewer 
        fileUrl="https://your-domain.com/path/to/target.pdf" 
        plugins={[defaultLayoutPluginInstance]} 
      />
    </div>
  </Worker>
);

注意事项 #

• 如果目标PDF所在服务器和你的前端应用不在同一域名下，需要确保服务器配置了**CORS（跨域资源共享）**规则，允许你的前端域名访问该PDF资源，否则会出现加载失败的跨域错误。
• fileUrl属性兼容本地资源路径、相对路径和远程URL，逻辑上没有区别，搜索等插件功能也会正常工作。

内容的提问来源于stack exchange，提问作者Anthon Santhez