最某项目需要做一个申报的页面,需要预览本地的pdf和视频


使用require引入静态文件时,发现视频和图片等的引入都没问题,但是引入pdf就开始报错.

不能使用 require(’@/assets/pdf/xxx.pdf’)

于是将pdf文件放在了public的文件夹下,直接使用/introduce.pdf,可以正常显示,但是部署中用到了nginx转发,如果使用这种绝对路径会显示成当前的网页,从而不能正常显示pdf,于是想到了直接用部署的地址+文件名,也可以正常显示
<template v-if="curSearchKey == 'a'">
    <embed src="/introduce.pdf" type="application/pdf" width="100%" height="100%">
</template>
<template v-if="curSearchKey == 'b'">
    <iframe style="width:100%; height:100%" allowfullscreen :src="require('@/assets/video/2-教学引导视频.mp4')" alt="实验视频"/>
</template>
<template v-if="curSearchKey == 'c'">
    <embed src="http://localhost:8888/shenbao/design.pdf" type="application/pdf" width="100%" height="100%">
</template>

前言
  最近开发项目时有个需求是在线预览 PDF 文件，然后百度了好久选出来一个功能比较强大并且好用的插件 PDF.JS，GitHub 下载地址（不知道最近咋了每次都想唠一会水一会）差点忘了说了，本文主要是讲使用过程中的常见错误，嗯，次要是讲咋使用
安装
  下载版本的话我们下在稳定版本的就可以了，没必要非追求最新版，当然也可以下载最新版本的，用法都一样，下载好了之后就找一个位置解压就可以了，或者直接放入程序里边，我们主要用到里边的 viewer.js 和 viewer.html 文件

  打开文件夹，把这两个文件放进程序，一个是 build，一个是 web 文件夹，不过我建议整个文件夹都放进去！到这差不多安装过程就 ok 了,viewer.html 文件里边有默认的 PDF 文件

  测试方法 window.open(' ../pdf/web/viewer.html') 
使用
  打开我们刚刚放入程序的文件，打开 web 文件目录，打开 viewer.js 文件找到他默认展示的 PDF 文件的路径改为 value:’’ ( 也可以不修改 ) 大概在 4250 行左右，不同的版本可能行数不一样，以实际名称为准 defaultUrl !!! 

  我们想要调用这个 JS 来预览 PDF 应该咋办呢？？？方法跟上方测试方法差不多，只不过多加了一个条件

  调用方法：windows.open("/pdf/web/viewer.html?file=file.pdf");

  这样些其实有一个问题，就是它只能读取你 web 目录下的文件，如果想要读取你本地文件或者服务器文件咋办呢？ 当然是通过流的方式输出咯！


获取本地文件 / 服务器文件（移动端预览）
  前端写法：通过点击事件触发预览

previewURL: 项目地址路径

filePath: 要打开的项目

encodeURIComponent：用于 url 特殊字符的转译（比如 ： ; / ? : @ & = + $ , # 这些用于分隔 URI 组件的标点符号）

// 点击调用预览方法
function xx(filePath){
	var previewURL= "127.0.0.1:8080/";
	window.open('../pdf/web/viewer.html?file='+encodeURIComponent(previewURL+"/test?url="+filePath));
}


后端写法：拿到文件地址，通过流的方式输出到移动端页面显示

// 通过文件流的方式预览 PDF 文件
@RequestMapping(value = "test")
public void pdfStreamHandeler(HttpServletRequest request, HttpServletResponse response, HttpSession session) {
	// 获取路径
    String filePath = request.getParameter("url");
    File file = new File(filePath);
    byte[] data = null;
    try {
    	// 编辑请求头部信息
        // 解决请求头跨域问题（IE兼容性 也可使用该方法）
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setContentType("application/pdf");
        FileInputStream input = new FileInputStream(file);
        data = new byte[input.available()];
        input.read(data);
        response.getOutputStream().write(data);
        input.close();
    } catch (Exception e) {
    }
}

测试界面

常见问题

1.跨域错误：file origin does not match viewer’s

   解决方式：找到 viewer.js 中下方的这段代码注释掉，大概在 1793 行附近，

   PS：因为每个人的版本不一样，建议使用搜索



2.找不到文件错误：这个问题原因是因为没有获取到你本地或者服务器文件，也就是 pdf > web 目录里没有这个 pdf ，因为它默认是获取这个目录下的 pdf 文件



   解决方式：获取本地文件或者服务器文件路径，通过流的方式输出到页面上 


3.文件损坏无法显示问题：出现这个问题一般都是你的 url 没有进行转码就直接请求到浏览器了，然后 url 存在的特殊字符会会让浏览器误认为你这个不是一个完整的链接



   解决方式：查看前端访问的路径是否使用 encodeURIComponent 转码

番外话题
  如何隐藏插件自带的下载和打印功能？？？打开你的 viewer.html 文件，搜索 <button id="download" 在这个 button 按钮加上一个属性 style="visibility:hidden" 就 ok 了，如下图





  我浅薄的记忆中好像还有遇到的别的错误，但我想不起来了，就先记录这些内容，到时候想起来再补充！！！欢迎留言指教

文件管理
0、需求及前言
1、前端，上传按钮嵌入数据表格中
2、利用IIS部署FTP文件服务器
3、后台FTP连接和文件操作
4、FTP遇到的问题和解决方案
5、预览PDF文件V1.0：FTP+临时文件
6、预览/下载文件V2.0：HTTP

0、需求及前言
我们的需求是实现文件的增删查改和预览功能。服务器有两台，一个是文件服务器，专门用来存储文件；另一个是用来部署项目的服务器。
小白啊，IO操作什么的基本没弄过，网络学的也不好，就搞这个操作，颇费心力。在网上扒了无数的帖子，换了很多个版本，最终还是实现了。总结下来其实也没有那么那么难，下面把关键的实现过程分享出来。不足之处请多指教。

前端框架：Layui

前端工具：pdf.js

协议：FTP、HTTP

后端：Springboot

需求：把上传、删除/替换按钮和预览下载功能放在数据表格中。文件上传至文件服务器。点击文件名时，对pdf文件进行预览，其他格式文件直接下载。

使用范围：内网用户（外网连接可以在此基础上另外了解）

最终效果：

1、前端，上传按钮嵌入数据表格中
这部分我写到了另一个博客，Layui 数据表格嵌套文件上传按钮，根据行数据id上传文件。
2、利用IIS部署FTP文件服务器
在网上找了两个教程，跟我当时设置的流程差不多：

如何搭建FTP服务器实现文件的上传及下载？
Win10搭建ftp（含设置用户和密码）

只要在网页上输入ftp://192.168.xxx.xxx:端口，然后输入用户名和密码（如果有的话）可以看到文件列表，就说明部署成功了。
我遇到的问题：

配置FTP服务时，登录后无法添加文件。

错误信息：“将文件复制到FTP服务器时发生错误”

解决办法： https://blog.csdn.net/hello_world_qwp/article/details/78717336

3、后台FTP连接和文件操作
在这里走了许多弯路。

网上有许多这种代码，大致是相同的，但是又有细微差别。我创建了一个工具类，便于其他controller调用。先把调试正常的代码放出来。遇到的问题后面会提到。
import org.apache.commons.net.ftp.FTPClient;
import org.apache.commons.net.ftp.FTPReply;
import org.apache.log4j.Logger;
import org.springframework.web.multipart.MultipartFile;

import java.io.*;
import java.net.SocketException;
import java.util.Date;

/**
 * @Author 27号白开水
 * @Date 2020/6/21 15:54
 */
public class FtpUtil {
    private static Logger logger = Logger.getLogger(FtpUtil.class);

    //ftp服务器ip地址
    private static final String FTP_ADDRESS = "192.168.xxx.xxx";
    //端口号
    private static final int FTP_PORT = 2333;
    //用户名
    private static final String FTP_USERNAME = "upload";
    //密码
    private static final String FTP_PASSWORD = "123456";
    //本地字符编码
    private static String LOCAL_CHARSET = "GBK";
    // FTP协议里面，规定文件名编码为iso-8859-1
    private static final String SERVER_CHARSET = "ISO-8859-1";
    //附件路径，这里没用到
    //private static String FTP_BASEPATH = "";

    //连接ftp, 获取到FTPClient对象
    public static FTPClient getFTPClient(){
        FTPClient ftp = new FTPClient();
        try {
            int reply;
            ftp.connect(FTP_ADDRESS, FTP_PORT);//连接FTP服务器
            ftp.login(FTP_USERNAME, FTP_PASSWORD);//登录
            ftp.setConnectTimeout(50000);// 设置连接超时时间,5000毫秒

            if(!FTPReply.isPositiveCompletion(ftp.getReplyCode())){
                logger.info("未连接到FTP，用户名或密码错误");
                ftp.disconnect();
                return ftp;
            }else {
                logger.info("FTP连接成功");
            }
            // 开启服务器对UTF-8的支持，如果服务器支持就用UTF-8编码，否则就使用本地编码（GBK）
            if (FTPReply.isPositiveCompletion(ftp.sendCommand("OPTS UTF8", "ON"))) {
                LOCAL_CHARSET = "UTF-8";
            }
            ftp.setControlEncoding(LOCAL_CHARSET);//设置字符集编码方式
        }  catch (SocketException e) {
            e.printStackTrace();
            logger.info("FTP的IP地址可能错误，请正确配置");
        } catch (IOException e) {
            e.printStackTrace();
            logger.info("FTP的端口错误,请正确配置");
        }
        return ftp;
    }

    //关闭FTP方法
    public static boolean closeFTP(FTPClient ftp){
        try {
            ftp.logout();
        } catch (Exception e) {
            logger.error("FTP关闭失败");
        }finally{
            if (ftp.isConnected()) {
                try {
                    ftp.disconnect();
                } catch (IOException ioe) {
                    ioe.printStackTrace();
                    logger.error("FTP关闭失败");
                }
            }
        }
        return false;
    }

    //上传文件
    public static boolean uploadFile(FTPClient ftp, MultipartFile multipartFile, String filePath) throws IOException {
        //获取上传的文件流
        InputStream inputStream = multipartFile.getInputStream();
        String fileName = multipartFile.getOriginalFilename();
        boolean success = true;
        try {
            ftp.enterLocalPassiveMode();//设置被动传输
            ftp.setFileType(FTPClient.BINARY_FILE_TYPE);//设置文件传输模式为二进制，可以保证传输的内容不会被改变,ASC容易造成文件损坏
            String directory = filePath.substring(0, filePath.lastIndexOf("/") + 1);
            // 如果远程目录不存在，则递归创建远程服务器目录，这里是用于多层文件夹嵌套新建的情况，如果只有一层，那么只需要 1：跳转目录 2：不存在就新建
            if (!directory.equalsIgnoreCase("/") //忽略大小写进行比较
                    && !ftp.changeWorkingDirectory(new String(filePath.getBytes(LOCAL_CHARSET),SERVER_CHARSET))) {
                int start = 0;
                int end = 0;
                if (directory.startsWith("/")) {
                    start = 1;
                } else {
                    start = 0;
                }
                end = directory.indexOf("/", start);//查询除开头“/”之外的第一个“/”的位置
                while (true) {
                    String subDirectory = filePath.substring(start, end);
                    if (!ftp.changeWorkingDirectory(subDirectory)) {//跳转子目录
                        if (ftp.makeDirectory(new String(subDirectory.getBytes(LOCAL_CHARSET),SERVER_CHARSET))) {//新建子文件夹
                            ftp.changeWorkingDirectory(subDirectory);//再次尝跳转子目录
                        } else {
                            System.out.println("创建目录失败");
                            success = false;
                            return success;
                        }
                    }
                    start = end + 1;
                    end = directory.indexOf("/", start);
                    // 检查所有目录是否创建完毕
                     if (end <= start) {
                         break;
                     }
                }
            }
            //跳转目标目录
            ftp.changeWorkingDirectory(filePath);
            success = ftp.storeFile(new String(fileName.getBytes(LOCAL_CHARSET),SERVER_CHARSET), inputStream); //存储
            if(success){
                logger.info("上传成功");
            }else{
                logger.error("上传失败");
            }
        } catch (IOException e) {
            e.printStackTrace();
            logger.error("上传失败");
        } finally {
            try {
                inputStream.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        return success;
    }

    //替换文件（实际是先删除后上传）
    public static Boolean replaceFile(MultipartFile file, String filePath, String fileName) throws IOException {
        Boolean success = false;
        FTPClient ftpClient = getFTPClient();
        deleteFile(ftpClient, filePath,fileName); //删除文件
        uploadFile(ftpClient, file, filePath);
        closeFTP(ftpClient);
        return success;
    }

    //删除文件
    public static Boolean deleteFile(FTPClient ftpClient, String filePath, String fileName){
        boolean flag = false;//转移至目标目录
        try {
            ftpClient.changeWorkingDirectory(new String(filePath.getBytes(LOCAL_CHARSET), SERVER_CHARSET));//跳转目录
            flag = ftpClient.deleteFile(new String(fileName.getBytes(LOCAL_CHARSET), SERVER_CHARSET));//删除文件
            if (!flag) {
                throw new Exception("FTP附件删除失败！");
            }
        } catch (IOException e) {
            e.printStackTrace();
        } catch (Exception e) {
            e.printStackTrace();
        }
        return flag;
    }
}

controller或者service调用就是这样：
//文件路径
String filePath = "/2020/";//路径不包含文件名
//调用自定义的FTP工具类上传文件
FTPClient ftpClient = FtpUtil.getFTPClient();
Boolean success = FtpUtil.uploadFile(ftpClient, multipartFile, filePath);//调用工具类上传
System.out.println(success? "上传成功": "上传失败");
FtpUtil.closeFTP(ftpClient);

我这里只是简单地用到了连接、上传、删除，还有5 中一个获取文件流，其他操作可以参考以下两位大佬的代码：

JAVA FTPClient FTP简单操作
java上传、下载、预览、删除ftp服务器上的文件

4、FTP遇到的问题和解决方案

FtpClient.storeFile返回false

这个问题网上的解决方案一般是因为没有设置服务器被动连接模式，或者是因为中文文件名问题，可以参考这个回答：https://www.cnblogs.com/xiangpiaopiao2011/archive/2012/02/28/2371679.html

但是我没有解决。

我在公司是用笔记本连内网wifi的，可以创建文件夹，但是文件传输就是false。在网上找了半天，很多回答都是更改成被动模式，但我这边不适用。后来同事测试了一下发现他的可以传文件上去？？？

残念。

后来考虑到操作文件的人（公司内部用）都是用的内网网线，就直接用这个版本的代码没有再改了。
文件夹和文件乱码的问题

解决办法：

1、开启服务器对UTF-8的支持，但是有的服务器是不支持UTF-8的，这时就只好用本地GBK的编码。

2、FTP协议规定文件名编码为iso-8859-1，所以上传的文件目录或文件名需要转码。

就是上面带有new String(xxxx.getBytes(LOCAL_CHARSET),SERVER_CHARSET) 的那些。
目标目录已创建，但是文件没有传到目录中去，而是传到了根目录上

这仍然是编码的问题导致的。加上那句new String(xxxx.getBytes(LOCAL_CHARSET),SERVER_CHARSET) 就好了。

预览的问题困扰了我很久，因为不知道怎么实现。网上的教程大多是从服务器本地拿文件，少了文件服务器，实现方式跟我这不一样。后来看到pdf.js这个插件，只要获取到文件输入流就可以实现预览。然后在获取文件流上又弯弯绕绕一大圈。中间的心路历程堪称心酸，吃了没文化的苦。
这里我尝试了两个版本，一是FTP+临时文件的版本，二是HTTP版本。方法一在生成临时文件时耗费时间，有些影响用户体验。推荐使用HTTP。（这里因为工期有点紧了，上传那里没有再学习HTTP方法，日后有机会再更新）（用FTP不用临时文件应该也是可行的，不过我没找到合适的方法）。
5、预览PDF文件V1.0：FTP+临时文件
pdf.js的用法很简单，就是下载，然后放到项目静态文件目录中，可以参考这两个文章：

https://blog.csdn.net/semial/article/details/89510312

https://blog.csdn.net/qq_36537546/article/details/105793577

最终的实现过程是这样的：先从FTP获取文件流，在本地生成一个临时文件，然后用pdf.js渲染临时文件。

现在想来，其实关键在于获取临时文件，pdf.js的用处只是渲染的更好看一些。

下面是关键（所有）代码：

js:
//表头渲染，使点击文件名即可预览
, {field: 'file_name', title: '文件名称', width: 480
   	, templet: function (d) {
        if (d.file_name != null && d.file_name != '' && d.file_name != undefined){
            return '<a href="javascript:void(0);" style="color: #0B9EB0;size: 15px;" lay-event="detail">'+d.file_name+'</a>';
        }else {
            return '未上传';
        }
    }
}

//对行操作进行监听，调用pdf.js打开临时文件
window.open("/static/js/mes/fileManagement/web/viewer.html?file=" //前半句是pdf.js的viewer.html的路径
                + encodeURIComponent("/allFiles/showDetail?filePath="+filePath));
                //后半句是controller的注解路径加传参，filePath是文件服务器路径+文件名。
                //然后对URL进行编码，否则会因为出现两个问号而报错

Controller：
@RequestMapping("/showDetail")
    public void showDetail(String filePath, HttpServletRequest request, HttpServletResponse response) throws IOException {
        System.out.println("文件查看" + filePath);
        // 编辑请求头部信息
        // 解决请求头跨域问题（IE兼容性 也可使用该方法）
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setContentType("application/pdf");
        FTPClient ftpClient = FtpUtil.getFTPClient();
        FileInputStream inputStream = FtpUtil.getStream(ftpClient, filePath);
        byte[] data = null;
        data = new byte[inputStream.available()];
        inputStream.read(data);
        response.getOutputStream().write(data);
        inputStream.close();
        FtpUtil.closeFTP(ftpClient);
    }

FtpUtil工具类：
//获取预览需要的文件流信息
public static FileInputStream getStream(FTPClient ftpClient, String filePath) throws IOException {//filePath是文件夹名加文件名
    //在客户端本地生成一个临时文件
    File tempFile = new File("E:/","mesTempFile.pdf");
    //将预览文件放到临时文件
    OutputStream outputStream = new FileOutputStream(tempFile);
    ftpClient.retrieveFile(new String(filePath.getBytes(LOCAL_CHARSET), SERVER_CHARSET),outputStream);
    outputStream.close();
    //读取临时文件的文件流
    FileInputStream fileInputStream = new FileInputStream(tempFile);
    return fileInputStream;
}

6、预览/下载文件V2.0：HTTP
这里参见我的另一篇博客
====================================

发布时间2020.06.29

更新时间2020.08.05
====================================
基本内容就是这些。

不足之处，请多指教。

之前项目里面需要加个pdf预览功能，然后用vue-pdf比较简单，可参考：Vue PDF文件预览vue-pdf ，但现在又让加上pdf打印功能，发现打印时会出现乱码，这一条其实也做了说明，简单说来就是将依赖的node_modules里面的vue-pdf文件中的pdfjsWrapper.js文件进行修改，这样本地确实能够正常打印。
可是这样本地是能运行了，打包部署也没问题，可是git上代码时是不会上传node_modules文件的，也就是说当别人下载这个项目的代码时别人的依赖模块还是原来的。就想到能不能不用它里面的，把自己改好的也上传到某个路径上，然后运行的时候不用原来的pdfjsWrapper.js，而是用自己项目中src路径下的改好的pdfjsWrapper.js。这时需要参考：如何修改 node_modules 里的文件 。
思想是这个思想，现在就看实际操作：
1.文件预览功能: 这个和 Vue PDF文件预览vue-pdf 基本一样，直接照着这个改吧，就不写了。
2.打印功能：我做的比较简单，直接加个按钮，用的vue-pdf自带的打印方法，这时打印是会有乱码的。
3. 开始改node_modules里面vue-pdf文件夹里面的pdfjsWrapper.js文件，这个文件改哪些还是参照Vue PDF文件预览vue-pdf 里面的
这时候修改了，本地运行就没啥大问题了（说用这个方法可能还会出现空白页的问题，这个我那个因为只有一页，暂时没管，如果多页的，上面那个网址也有别的方法打印，可以看看）
4.把修改好的文件复制到自己项目中，如何修改 node_modules 里的文件 这个里面有类似的说明，我按照这个说下我改的，首先我把这个改好的pdfjsWrapper.js文件复制到src/common下，
注意，因为你把文件pdfjsWrapper.js复制到你自己项目中了，那它里面依赖的路径也需要改了，还好，这里面只import了一个，好改。
原来：
现在pdf文件夹下的pdfjsWrapper.js文件，因为之前的是引入上一层node_modules里面的，但现在又换了位置，改成
我没怎么见过在文件中直接导入/node_modules这种的，担心打包之后会有问题。但还好，打包部署后正常。
改好文件，复制好之后，就开始替换原来的了，找到你的项目中配置路径别名的文件，一般在build文件里找
或者全局搜一搜alias啥的，肯定在啥配置文件里，我的在webpack.base.conf.js。加上一句下面这个，意思就是，当需要引入pdfjsWrapper.js时，用括号里的路径里的文件来替代。
4.这样重新运行和打包都行了。
注意：如果报啥pdf_view找不到啥的，看看是不是有那个vue-pdf的依赖包，我的版本是
滚动显示pdf预览
百度 vue-pdf滚动显示，出来一大堆，比如： vue-pdf 插件 不翻页 滚动效果
可以参考上面的，但有时候会报错，this.pdfSrc.then is not a function
这时候需要加一个promise。使用vue-pdf实现文档在线预览报错（this.pdfSrc.then is not a function）
就可以解决了。