vue-pdf.js 在线预览问题

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

此时遇到第一个问题：

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

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

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

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

最后引一波示例,

（1）我们在本地新建一个。htaccess的文本文件，注意。htaccess是这个文本文件的名称，所以文本文件的全称是：。htaccesstxt

（2）在该文本文件中写入如下代码：

复制代码

1 # 将 RewriteEngine 模式打开

2 RewriteEngine On

3

4 RewiteBase /

5

6 RewriteCond %{HTTP_HOST} ^（www\）？example\com$ [NC]

7 RewriteCond %{REQUEST_URI} !^/bbs/

8 RewriteCond %{REQUEST_FILENAME} !-f

9 RewriteCond %{REQUEST_FILENAME} !-d

10 RewriteRule ^（。）$ bbs/$1

11 # 没有输入文件名的默认到到首页

12 RewriteCond %{HTTP_HOST} ^（www\）？example\com$ [NC]

13 RewriteRule ^（/）？$ bbs/forumphp [L]

复制代码

（3）将该文本文件的扩展名。txt去掉，使用ftp上传工具上传到网站的根目录（www/web目录），注意，这里一定要是网站的根目录。我们在做seo优化设置里面的URL静态化也需要写这个文件，但是那个。htaccess文件就要放在bbs目录里面。