关于react打开新窗口展示本地pdf问题

一开始，我以为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用过的都知道是什么东西，一个反向代理服务器。

1. 修改conf目录中nginx.conf文见

server {
		listen 80;  //监听端口，基本上不用修改
		server_name pdf.com;  //服务名  自己起一个，不要起存在的

		location / {
			root F:/test/;   //文件所在绝对路径
		}
	}

2. 修改本地hosts文件-可以下载SwitchHosts软件修改更方便

//添加一行映射 即可
127.0.0.1  pdf.com

3. 完成以上操作后，就可以通过a标签直接打开本地文件

<a onClick={this.toPdf}>dianji</a>

toPdf=()=>{
        const w=window.open('about:blank');
        w.location.href='http://pdf.com/testoone2.pdf'
    }

• 打开展示–并且有下载和打印功能，不用在前端中另写代码
  
  - 总结：
  真不错