react如何打开pdf连接

在React中打开PDF链接的方法

使用<a>标签直接链接PDF文件 将PDF文件放在public文件夹或服务器上，通过<a>标签的href属性直接链接到PDF文件。添加target="_blank"和rel="noopener noreferrer"确保在新标签页安全打开。

<a href="/path/to/file.pdf" target="_blank" rel="noopener noreferrer">
  查看PDF文件
</a>

使用window.open()方法动态打开 通过JavaScript的window.open()方法动态打开PDF链接，适合需要条件触发的情况。

<button onClick={() => window.open('/path/to/file.pdf', '_blank')}>
  打开PDF
</button>

使用第三方库处理PDF预览 对于需要嵌入PDF预览的场景，可以使用react-pdf等库直接渲染PDF内容。

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

function PDFViewer() {
  return (
    <Document file="/path/to/file.pdf">
      <Page pageNumber={1} />
    </Document>
  );
}

注意事项

• 确保PDF文件路径正确，存放在可访问的位置（如public文件夹或CDN）。
• 跨域问题需配置服务器允许PDF文件的访问。
• 大文件建议分片加载或提供下载选项优化用户体验。