vue-pdf.js 在线预览问题

JavaScript0119

vue-pdf.js 在线预览问题,第1张

最近修改公司vue项目中使用pdf.js来实现在线预览上传的各类文件.由于使用pdf.js在预览时是直接在标签内将src属性赋值为要请求的地址.这就导致一个问题,会直接请求服务器的文件路径地址,而这个服务器文件路径就会暴露出来。处于安全性考虑在预览请求时不再返回地址,改为通过调用普通接口,而是统一返回流(word,pdf)或者base64(jpg,png...)。.前端再进行解析并实现在线预览.

此时遇到第一个问题:

        这个请求是在插件中进行的无法携带项目中封装的各类请求头信息(token..等)。 翻看pdf.js源码及网上总结.发现一个底层方法 

         该方法可传一个对象作为参数,对象内可以添加url(所请求的接口),headers(请求头信息)等.... . 有了这个方法就好处理了.

         最后在将该方法当做变量赋值给pdf的src.大功告成.

         最后再补充一些 : @loaded="docLoaded" @page-loaded ="pageLoaded" 这两个方法为加载预览文件时的loading事件,

最后引一波示例,

其实也就是简单的在浏览器中实现一个打开pdf文件,并有类似预览功能的边框。

其实在中国上经常见到类似的页面,在浏览器中打开pdf文档,可大部分都是由于版权的原因使用了一些很特殊的技术,自然很难模仿了。

即使有直接在浏览器打开的例子,也必须手动点击一下链接然后才能打开pdf文件。如何直接打开,而不用点击链接呢?

本以为自己对js很熟,也就使用js模拟点击,可就是不管用,没办法,只能在中国上继续寻找资料。最终想不到代码却很简单。

最主要的是使用到了一个jquery的插件jquery.media.js,使用这个插件就很容易实现了。

核心代码:

河套西部一次局地大暴雨成因分析使用jquery.media.js就可以直接把一个连接到pdf文件的链接打

在线预览的不是office格式,而且是swf文件,

flexPaper是可以把swf放在页面上进行展示的,

1、flash 的flexpaper 将文档转换为swf格式,然后使用flash在网页中浏览,

2、使用开源的软件openoffice+pdf2htmlEx,利用openoffice的接口先将文档转换为pdf格式,然后在使用pdf2htmlEx将文档转换为html直接在网页中显示;

3、搭建一个文档预览服务器,基于office web app,也就是微软的office online。

搭建服务器步骤:

首先,需要转换server

安装IIS 7.0,打开服务器管理器,添加角色和功能,打开“添加角色和功能向导”界面,点击下一步,因为是基于本机安装,所以要选择“基于角色或者基于功能安装”,在服务器角色列表上选择“Web服务器”,点击下一步,安装完成。

其次,域控server

(1)打开服务器管理器,添加角色和功能,出现“添加角色和功能”界面,下一步,因为是基于本机安装,所以要选择“基于角色或基于功能安装”,选择添加AD域服务,同时添加所需功能,根据提示操作,下一步,等待安装完成。

(2)配置域,点击服务器管理器左侧“AD DS”,点击“升级为域控制器”,进入AD域服务器配置向导,下一步(注意:域的填写),填写密码,下一步,提示DNS无法创建,不用管,继续下一步,安装路径,默认,下一步,查看选项,默认,下一步,点击安装,安装完成,会提示注销重启。

(3)将转换服务器加入到域控服务器,修改NDS,指向域控服务器,在计算机属性中,修改计算机名称,并添加到域控服务器(如下图),确定后提示注销重启服务器,在域控服务器,管理中选择添加服务器,名称填写office web apps server的计算机名称,立即查找。然后添加到右边,确定。在域控服务器中,所有服务器显示两台服务器,并都是联机状态则表示成功。

至此,服务器安装完成。