pdf.js跨服务器访问文件夹

话不多少直接操作
1,先附带一个官方地址提供下载
pdf.js官网:http://mozilla.github.io/pdf.js/
减压下来的文件夹
在这里插入图片描述
我们新建一个项目
在这里插入图片描述
添加一个新项(我用的webform)
在这里插入图片描述
在里面添加一个iframe在这里插入图片描述
准备工作都做好,现在进入正题:
我们把我们下载的文件扔到项目中去这样:在这里插入图片描述
我们在web文件夹里面找到viewer.js打开,把value的默认值清空
在这里插入图片描述
下面我们只需要给iframe的src赋值就好了,我这里用的是jq
在这里插入图片描述
jq的链接就不提供了,大家应该都有
然后我们运行一下项目在这里插入图片描述
好看的页面出来了,说明已经成功一半了!
2,下面来说下跨浏览器的办法,办法有很多,我这里只说一种最简单的,也是大家最容易操作的方法:
pdf.js为了安全性的考虑,它是不自带跨服务器访问的,但是它也没有说不能对吧。
(我在这里啰嗦一下,这个对我们做项目也是一个启发:既然他不能跨出我们的项目文件夹进行访问,那么我们何不把下载的这俩个文件夹直接扔到我们远程上去用端口的形式进行访问文件夹呢?下面直接上操作步奏)
跨服务器访问
我们在远程的服务器上新建一个网站,把我们下载好的俩个文件夹在它扔上去(记得清空viewer.js里面的value的默认值)
在这里插入图片描述
然后生成网站给发布到远程的iis里面
在这里插入图片描述
在这里插入图片描述
不要点图二中的预览,点了也看不到
这个时候我们打开网站用端口的形式看能不能打开我们的样式
在这里插入图片描述
不错很成功。
我们在我们的远程网站中建立一个文件夹用来测试用
在这里插入图片描述
这个时候我们回到我们本地的demo中去
修改我们的src地址
在这里插入图片描述
让我们查看一下页面
在这里插入图片描述
运行完美,下面说一下我用的浏览器,以及你们可能出现的问题
1,360浏览器8.1版本
2,在你们项目中会出现的问题有,地址正确的,但是pdf文件打不开
出现这个问题原因应该是中文乱码造成的
什么是中文乱码,这里解释一下:我们的浏览器默认吧%号解析成转义字符(说到这里,有的小伙伴应该已经懂了),而我们的文件夹的命名会出现中文(这个属于一般字符),说到这里大家应该很明白了吧,老外很过分对吧,不让我们玩中文,哈哈,下里提供一种大牛的解决办法:
encodeURI()函数;明白的人已经知道,不明白的直接抄代码:
在这里插入图片描述
3,放在项目中可能加载了样式,但是没有加载pdf文件,这个可能出现的问题是,你的项目不允许跨域造成的,只需要配置一下web.config中system.webServer中配置允许跨域就可以了,具体操作看看这个大佬的链接https://blog.csdn.net/qq_22172905/article/details/52934055
大功告成

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值