记录一次文档在线预览功能的解决历程

时间：2021-10-11

1、需求：

Spring boot+vue前后端分离项目实现文档上传后的浏览器预览功能

（文件是提前上传到minio文件服务器上了）

通过接口获取到minio服务器返回的文件流，将文件流处理成可网页预览

2、思路：

2.1、 Pdf流直接可以用vue-pdf插件或pdfjs插件直接预览

2.2、 doc流和docx流因为不能直接浏览器预览，则需要转换成pdf流，然后再做预览操作

2.3、 然而在预览过程中出现了docx或doc转pdf后返给前端pdf的流预览不能显示字符问题（转换后的pdf直接打开能显示），不知道是什么原因导致的，后来放弃了

2.4、 既然转换后的文件都生成到指定目录下了，转换思路将文件通过nginx直接访问源文件，通过iframe做预览操作。

3、代码：

【将文件流落文件到本地】：

/** * 将文件流落成文件到指定目录下 * @param basePath * @param fileDir * @param tbAttachment * @param bytes * @param outputStream * @param bufferedInputStream * @throws Exception */public void toDealSaveFile(String basePath,String fileDir,TbAttachment tbAttachment,byte[] bytes,OutputStream outputStream,BufferedInputStream bufferedInputStream) throws Exception {    //1、创建文件    createFile(basePath+Contexts.SUFFIX_COMMONALITY+Contexts.SUFFIX_FILE,tbAttachment.getAttachmentName(),tbAttachment.getSuffixName());    //2、构建流    File file = new File(fileDir);    outputStream = new FileOutputStream(file);    //3、内容写入流    int i = 0;    while ((i = bufferedInputStream.read(bytes, 0, bytes.length)) != -1) {        outputStream.write(bytes, 0, i);    }    outputStream.flush();    outputStream.close();}
复制代码

【pom依赖】：

org.apache.poi poi 3.14 org.apache.poi poi-ooxml 3.14 org.apache.poi poi-scratchpad 3.14 fr.opensagres.xdocreport xdocreport 1.0.6 org.apache.poi poi-ooxml-schemas 3.14 org.apache.poi ooxml-schemas 1.3 com.itextpdf itextpdf 5.5.13 com.itextpdf.tool xmlworker 5.5.11 com.itextpdf itext-asian 5.2.0 org.xhtmlrenderer flying-saucer-pdf-itext5 9.0.3 org.jsoup jsoup 1.11.3

【工具类】： 省略

【将落成后的文件word转换成pdf】：

pdfPath = basePath+Contexts.SUFFIX_COMMONALITY+Contexts.SUFFIX_FILE+"/"+tbAttachment.getAttachmentName()+Contexts.DIAN+Contexts.SUFFIX_PDF;
String pdfDir = basePath+Contexts.SUFFIX_COMMONALITY+Contexts.SUFFIX_FILE+"/image/";
String docxHtml = "";
//docx和doc转换方式不一样
if(Contexts.SUFFIX_DOCX.equals(tbAttachment.getSuffixName())){
    //docx转html
    docxHtml = PoiItextUtil.docx2Html(docxPath, pdfDir);
}else if(Contexts.SUFFIX_DOC.equals(tbAttachment.getSuffixName())){
    //doc转html
    docxHtml = PoiItextUtil.doc2Html(docxPath, pdfDir);
}else{}
docxHtml = PoiItextUtil.formatHtml(docxHtml);
// 内容替换
//docxHtml = docxHtml.replace("", "");
//html转成pdf
PoiItextUtil.htmlToPdf(docxHtml, pdfPath);
复制代码

【将文件转成流返回给前端】

httpServletResponse.setContentType("application/force-download");FileInputStream fileInputStream = null;BufferedInputStream bufferedInputStream = null;OutputStream outputStream = null;
//设置headerhttpServletResponse.addHeader("Content-Disposition", "fileName=" + new String((tbAttachment.getAttachmentName() + "." + tbAttachment.getSuffixName()).getBytes("UTF-8"), "iso-8859-1"));httpServletResponse.addHeader("Access-Control-Expose-Headers", "Content-Disposition");httpServletResponse.addHeader("Content-Length", String.valueOf(tbAttachment.getAttachmentSize()));
File pdfFile = new File(pdfPath);inputStream = new FileInputStream(pdfFile);bufferedInputStream=new BufferedInputStream(inputStream);//将文件流返回给前端展示outputStream = httpServletResponse.getOutputStream();while ((inputStream.read(bytes))!=-1){    outputStream.write(bytes);}inputStream.close();
复制代码