react如何打开pdf连接

在React中打开PDF链接的方法

使用<a>标签直接链接PDF文件 将PDF文件托管在服务器或云存储中，通过<a>标签的href属性直接链接到PDF文件。添加target="_blank"在新窗口打开：

<a href="https://example.com/document.pdf" target="_blank" rel="noopener noreferrer">
  查看PDF文档
</a>

使用react-pdf库嵌入PDF预览 安装react-pdf库后，通过Document和Page组件在页面内直接渲染PDF：

npm install react-pdf

import { Document, Page } from 'react-pdf';

function PDFViewer() {
  return (
    <Document file="https://example.com/document.pdf">
      <Page pageNumber={1} />
    </Document>
  );
}

通过iframe嵌入PDF 使用iframe标签直接加载PDF文件，适合需要固定高度展示的场景：

<iframe 
  src="https://example.com/document.pdf" 
  width="100%" 
  height="500px"
  title="PDF文档"
/>

使用第三方服务（如Google Docs Viewer） 通过URL参数将PDF链接传递给在线查看器：

<a 
  href={`https://docs.google.com/viewer?url=${encodeURIComponent('https://example.com/document.pdf')}`}
  target="_blank"
>
  通过Google查看PDF
</a>

注意事项

• 跨域问题需确保PDF文件所在服务器配置CORS
• 大文件建议分页加载或提供下载选项
• 移动端需测试浏览器兼容性