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
大功告成

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
PDF.worker.js是一个JavaScript库,用于在Web浏览器中加载和渲染PDF文件。它是由Mozilla开发的PDF.js项目的一部分,旨在提供一种基于Web技术的PDF查看器。 PDF.worker.js的下载过程相对简单。首先,您需要在网络上找到PDF.worker.js的下载链接。该文件通常位于PDF.js项目的GitHub存储库中。访问存储库后,您可以找到下载按钮或链接,点击它将开始下载过程。 下载PDF.worker.js时,您可以选择将文件保存在您喜欢的位置,例如您的计算机硬盘或网络服务器上的特定文件夹。确保选择一个易于访问的位置,以便在使用这个库时能方便地加载和引用它。 一旦下载完成,您就可以在Web应用程序或网站中使用PDF.worker.js了。通常情况下,您需要在HTML页面中包含一个引用,将PDF.worker.js文件链接到页面。您可以使用<script>标签来实现这一点,类似于以下示例: <script src="path/to/pdf.worker.js"></script> 在引用这个文件之后,您可以使用PDF.js提供的API来加载和渲染PDF文件。您可以通过创建一个新的PDF.js实例并调用相应的方法来完成这些操作。具体的使用方法和功能使用需求因人而异,可以根据项目需求自行探索。 总结而言,要下载PDF.worker.js,您需要找到下载链接并将文件保存在适当的位置。然后,在使用该文件的Web应用程序或网站中添加引用,通过调用PDF.js提供的API来加载和渲染PDF文件。希望这个回答能帮助到您!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值