doc文件在线预览 vue_跨平台（uniapp）文件在线预览解决方案

一、前言

之前写过一篇文章关于上传目录文件：uni-app系统目录文件上传(非只图片和视频)解决方案，这次来解决文件预览问题。

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。在做业务系统时，不可避免会遇到文件在线预览的需求。这里的文件包括PDF、Word、Excel、PPT、图片等。而在线预览不是下载后再用本地软件或浏览器打开预览，而是直接通过文件流的形式查看。本方案主要解决在线预览问题，以及在uni-app开发过程中遇到一系列问题。

如果有欠缺的地方，或者有更好的方案，还望各位码友多提意见，多多交流，文章最后可以加我。

文件预览，首先会想到pdf预览，前端做pdf预览，首先也会想到pdf.js，那我们就从pdf.js说起。

二、PDF预览

pdf.js开源地址和在线例子GithubOnline Demo

2.1 使用方法一

• 下载插件包，下载地址

• 解压，拷贝build和web目录到项目hybrid->html目录下，参考uni-app中web-view用法

• 新建vue组件file-preview.vue

  • viewerUrl：前端本地viewer.html页面地址
  • fileUrl：文件流访问地址，参考《三、文件流服务》

<view><web-view :src="allUrl">web-view>view>template><script>import globalConfig from '@/config'export default {
    
    
  data() {
    
    return {
    
    viewerUrl: '/hybrid/html/web/viewer.html',// viewerUrl: globalConfig.baseUrl + '/pdf/web/viewer.html',
    allUrl: ''
   }
  },
  onLoad(options) {
    
    let fileUrl = encodeURIComponent(
    globalConfig.baseUrl + '/api/attachment?name=' + options.name + '&url=' + options.url)this.allUrl = this.viewerUrl + '?file=' + fileUrl
  }
 }script>

• 效果

  • h5端 显示正常
  • Android端 显示模糊，并且中文显示不全，其中模糊问题是模拟器原因；但是中文显示问题是真，调试出现两个警告。第二个警告pdf.js默认不显示电子签章(数字签名)问题，查了很多资料也没解决，各位码友有遇到过并且解决了吗？
  • iOS端 出现跨域问题，并且调试出现无法访问pdf.js国际化文件

• 解决 基于Android和iOS预览出现的各种问题，最根本原因是viewer.html文件放到前端导致加载资源文件丢失问题。针对这个问题，我就在想能不能直接放在spring后端作为静态资源访问文件呢？于是有了下面的方法。

2.2 使用方法二

• 在基于spring mvc的后端代码中，将插件包的build和web文件夹放到webapp下面(新建pdf文件夹)，spring boot架构的后端项目同理，放到静态资源目录

• 在xml文件中配置静态文件访问

• 修改前端组件file-preview.vue中的viewerUrl，其中globalConfig.baseUrl为代理后端地址的baseUrl。如Vue中proxyTable或nginx代理

viewerUrl: globalConfig.baseUrl + '/pdf/web/viewer.html'

• 修改后效果
  • iOS端
  • Android端 模糊是模拟器原因，在真机上测试通过

三、文件流服务

3.1 方法一：tomcat配置

配置tomcat的config目录下的server.xml，在最后的中间添加如下：

port=8090 文件访问服务端口docBase="/root/" 文件存储目录 服务器上文件会存储到/root/fileData/目录下 文件访问地址为：http://ip地址:8090/fileData/文件名

<Service name="fileData">  
      
    
    <Connector port="8090" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" />
    <Engine name="fileData" defaultHost="localhost">  
         
    <Host name="localhost" appBase="webapps"  unpackWARs="true" autoDeploy="true" xmlValidation="false" xmlNamespaceAware="false">  
          
        <Context path="" docBase="/root/" debug="0" reloadable="false"/>  
    Host>  
    Engine>
Service>

3.2 方法二：写代码获取服务器文件进行转换

直接上代码

读取目录文件，转换为二进制流前端组件file-preview.vue中fileUrl为 /api/attachment

核心代码

ios = new FileInputStream(sourceFile);
os = response.getOutputStream();
int read = 0;
byte[] buffer = new byte[1024 * 1024];
while ((read = ios.read(buffer)) != -1) {
    
    
    os.write(buffer, 0, read);
}
os.flush();

完整代码

@RequestMapping(value = "/api/attachment", method = RequestMethod.GET)
    public void getFileBytes(@RequestParam("name") String name, @RequestParam("url") String url, HttpServletRequest request, HttpServletResponse response) {
    
    
        response.reset();
        response.setContentType("application/octet-stream");
        response.setCharacterEncoding("utf-8");
        response.setHeader("Content-Disposition", "attachment;filename=" + name);

        AttachmentVO attachmentVO = new AttachmentVO();
        FileInputStream ios = null;
        OutputStream os = null;
        try {
    
    
            name = CharsetUtils.toUTF_8(name);
            url = CharsetUtils.toUTF_8(url);

            attachmentVO.setUrl(url);
 &n