前端文件（图片、PDF文档）预览简单实现（Not allowed to load local resource…）

太过爱你忘了你带给我的痛 2023-07-13 12:22 100阅读 0赞

### 一、背景 ###

为了实现简单的文件预览功能。

### 二、实现过程 ###

**（1）**第一步我放置了a 标签并设置了 href 属性

**（2）**运行测试，出现 Not allowed to load local resource 的报错，原因：浏览器出于系统安全的考虑，不允许直接访问服务器上的本地文件。

![20200312090621234.png][]

**（3）**解决的方法很简单，就是配置一个虚拟路径，这样浏览器就不会限制了。有两种方法可进行配置：

**方法一：在Eclipse上直接配置**

首先双击打开 Tomcat 的设置页面，接着点击 Modules 切换页面；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw_size_16_color_FFFFFF_t_70][]

点击 Add External Web Module...

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw_size_16_color_FFFFFF_t_70 1][]

Document base 选择的是预览文件的存放位置，Path 配置的是文件的虚拟路径，这亚子等会在 a 标签的 href 属性配置“ /file/order/a.png ” 浏览器就不会拦截啦。记得配置完保存重启 Tomcat 啊！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw_size_16_color_FFFFFF_t_70 2][]

**方法二：在 Tomcat 配置文件 server.xml 上配置**

首先，找到 Tomcat 的位置，打开 conf 文件夹，找到配置文件 server.xml ；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw_size_16_color_FFFFFF_t_70 3][]

在 Host 标签里添加一行 <Context docBase="D:\\orderBomFile\\" path="/file" reloadable="true"/>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw_size_16_color_FFFFFF_t_70 4][]

docBase代表文件存放的位置，path代表的是虚拟路径，跟上面一样，到时在 a 标签的 href 属性配置“ /file/order/a.png ” 浏览器就不会拦截了。同样，保存后要重启服务器！

（3）最终代码

<body> 
        	<h1>小白学习</h1>
    		<a href="/file/order/a.png">预览1</a><br>
    		<a href="/file/order/c.pdf">预览2</a><br>
    		<button onclick="openImage()">预览3</button>
    		<button onclick="openPdf()">预览4</button>
    		<script type="text/javascript">
    		    function openImage(){
    		        window.open("/file/order/a.png");
    		    }
    		    function openPdf(){
    		        window.open("/file/order/c.pdf");
    		    }
    		</script>
        </body>

### 三、补充 ###

这种方式可以实现图片和PDF文档的简单预览，换做其他格式的文件就变成直接下载了，比如 doc、docx、pptx等。

[20200312090621234.png]: https://img-blog.csdnimg.cn/20200312090621234.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200312091138928.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200312091749755.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2020031209183443.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200312092657501.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/2020031209303669.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw==,size_16,color_FFFFFF,t_70