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文件的访问。
- 大文件建议分片加载或提供下载选项优化用户体验。
