一开始,我以为react和普通的html相同,可以通过a标签在href中引入文件的绝对路径就可以,后来发现调试窗口显示不被允许操作本地资源。
在网上找了好多相关的教程以及讨论,并且尝试之后,发现一种可行的方案。那就是引入react-pdf-js这个组件库。
代码如下:
import PDF from 'react-pdf-js'
const PDFTest = require('F:/test/ecr/20201118/testoone2.pdf');
@Form.create()
class Pdf extends PureComponent {
render() {
return (
<PDF file={PDFTest}
onDocumentComplete={ }
page={ }
/>
)
}
}
export default Pdf;
这是pdf.js的代码,不完整,因为我也没写完,后面介绍新的思路。我是将pdf放在一个新的页面中。还需要在路由中配置路径。
在主页面中新增一个a标签,加一个点击事件,点击事件中写
this.props.history.push('路由')
点击后即可跳转为pdf页面。你会发现pdf无法实现下拉,不能一页全不展开,要实现分页功能,才可以显示全部。
重点来了
做到这里,我就觉得太繁琐了,不是我想要的结果。既然react中的a标签不能打开绝对路径的文件,那把它变为虚拟路径下的文件即可。nginx用过的都知道是什么东西,一个反向代理服务器。
- 修改conf目录中nginx.conf文见
server {
listen 80; //监听端口,基本上不用修改
server_name pdf.com; //服务名 自己起一个,不要起存在的
location / {
root F:/test/; //文件所在绝对路径
}
}
- 修改本地hosts文件-可以下载SwitchHosts软件修改更方便
//添加一行映射 即可
127.0.0.1 pdf.com
- 完成以上操作后,就可以通过a标签直接打开本地文件
<a onClick={this.toPdf}>dianji</a>
toPdf=()=>{
const w=window.open('about:blank');
w.location.href='http://pdf.com/testoone2.pdf'
}
- 打开展示–并且有下载和打印功能,不用在前端中另写代码
- 总结:
真不错