计算机毕业设计中用js+html+java实现文件预览

首先就这个文件格式来说有txt，html，doc，docx，xml等由于格式不一致，导致走了一些弯路，包括下载文件和网页预览

预览文件

//查看文件内容
function viewFile(aHtml) {var filePath = $(aHtml).parent().parent().children('td').eq(4).children().html().replace("\\","/");var fileFormat = $(aHtml).parent().parent().children('td').eq(5).children().html();var fileName = $(aHtml).parent().parent().children('td').eq(0).children("span").eq(1).html();if(fileFormat!="pdf" && fileFormat!="doc" && fileFormat!="docx" && fileFormat!="htm" && fileFormat!="html"){layer.open({type: 1,offset: '50px',skin: 'layui-layer-molv',title: "查看内容",area: ['800px', '500px'],shade: 0,shadeClose: false,btn: ['返回'],content: '<div><font style="margin-left:360px">文件内容</font></div><td style="width:800px"><div style="height: 380px;width:95%;float: left;margin-left: 20px"><textarea id="fileContentId" style="height: 380px;width:100%;overflow-y:auto"></textarea></div></td>',});$.ajax({type: "POST",url: baseURL + "cms/systemModuleFileCollect/viewFile",dataType: "text",data: {filePath: filePath,fileFormat: fileFormat},success: function (data) {//json对象转出对象var dataVal = JSON.parse(data);var fileContent = dataVal.fileContent;$("#fileContentId").text(fileContent);}});}else{var url = baseURL+"modules/cms/previewFile.html";var tempForm = document.createElement("form");tempForm.method="post";tempForm.action=url;tempForm.target="_blank";window.localStorage.setItem("source", "fileCollect");window.localStorage.setItem("filePath",filePath);window.localStorage.setItem("fileFormat", fileFormat);window.localStorage.setItem("fileName", fileName);document.body.appendChild(tempForm);tempForm.submit();document.body.removeChild(tempForm);}
};

转入新的预览文件页面

<divstyle="width:100%;height:100%"><iframe id="mainframe"style="width:100%;height:100%;"></iframe>
</div>

$(function () {window.history.replaceState(null, null, window.location.href);var mainIframe = document.getElementById('mainframe');var fileName=window.localStorage.getItem("fileName");var filePath=window.localStorage.getItem("filePath");var fileFormat=window.localStorage.getItem("fileFormat");if(fileName!=null && fileName.lastIndexOf(".")!=-1){fileName=fileName.substring(0,fileName.lastIndexOf("."));}document.title=fileName;if(fileFormat=="pdf"){mainIframe.src="../../statics/plugins/pdf/web/viewer.html?file=http://"+window.location.host+"${request.contextPath}/cms/systemModuleFileCollect/previewPdf?filePath%3D"+encodeURIComponent(filePath);}else if(fileFormat=="doc" || fileFormat=="docx" || fileFormat=="htm" || fileFormat=="html") {mainIframe.src = baseURL + "cms/systemModuleFileCollect/previewWordOrHtml?filePath=" + filePath;}});

不同文件类型，访问不同的后端接口，其中pdf格式的文件借助pdf.js插件在前端展示，要注意pdf预览的路径问题，及跨域问题的解决

@RequestMapping(value = "/previewPdf", method = RequestMethod.GET)public void previewPdf(String filePath, HttpServletResponse response) {File file = new File(filePath);if (file.exists()) {byte[] data = null;try {FileInputStream input = new FileInputStream(file);data = new byte[input.available()];input.read(data);response.getOutputStream().write(data);input.close();} catch (Exception e) {logger.error("pdf预览错误");}} else {logger.warn("文件不存在");}}@RequestMapping(value = "/previewWordOrHtml", method = RequestMethod.GET)public void previewWordOrHtml(String filePath,HttpServletResponse response) {File file = new File(filePath);String fileName=file.getName();String fileFormat=fileName.substring(fileName.lastIndexOf("."),fileName.length());ServletOutputStream out;String aimPath="";if (fileFormat.equals(".doc")) {aimPath = filePath.replace(".doc",".html");DocToHtml docToHtml = new DocToHtml();try {docToHtml.docToHtml(filePath,aimPath, EncodingDetect.getJavaEncode(filePath));} catch (Exception e) {e.printStackTrace();logger.error("word文件预览错误");}} else if (fileFormat.equals(".docx")) {aimPath = filePath.replace(".docx",".html");DocxToHtml test = new DocxToHtml();try {test.docxToHtml(filePath,aimPath);} catch (Exception e) {logger.error("word文件预览错误");return;}}else{aimPath=filePath;}File htmlFile=new File(aimPath);if(htmlFile.exists()){try {FileInputStream inputStream = new FileInputStream(htmlFile);out = response.getOutputStream();int b = 0;byte[] buffer = new byte[1024];while ((b = inputStream.read(buffer)) != -1) {out.write(buffer, 0, b);}inputStream.close();out.flush();out.close();} catch (Exception e) {logger.error("文件预览错误");}finally {if(!(fileFormat.equals("html") && fileFormat.equals("htm"))){htmlFile.delete();}}}else {logger.warn("文件不存在");}}

import org.apache.commons.io.FileUtils;
import org.apache.poi.hwpf.HWPFDocumentCore;
import org.apache.poi.hwpf.converter.WordToHtmlConverter;
import org.apache.poi.hwpf.converter.WordToHtmlUtils;
import org.apache.poi.hwpf.usermodel.Picture;
import org.w3c.dom.Document;
import org.w3c.dom.Element;import javax.xml.parsers.DocumentBuilderFactory;
import javax.xml.parsers.ParserConfigurationException;
import javax.xml.transform.*;
import javax.xml.transform.dom.DOMSource;
import javax.xml.transform.stream.StreamResult;
import java.io.*;
import java.util.Base64;
/**** doc转html处理*/
public class DocToHtml{public void docToHtml( String sourcePath,String aimPath,String encode) throws IOException, ParserConfigurationException, TransformerException {HWPFDocumentCore wordDocument = WordToHtmlUtils.loadDoc(new FileInputStream(sourcePath));WordToHtmlConverter wordToHtmlConverter = new ImageConverter(DocumentBuilderFactory.newInstance().newDocumentBuilder().newDocument());wordToHtmlConverter.processDocument(wordDocument);Document htmlDocument = wordToHtmlConverter.getDocument();ByteArrayOutputStream out = new ByteArrayOutputStream();DOMSource domSource = new DOMSource(htmlDocument);StreamResult streamResult = new StreamResult(out);TransformerFactory transformerFactory = TransformerFactory.newInstance();Transformer serializer = transformerFactory.newTransformer();serializer.setOutputProperty(OutputKeys.ENCODING, encode);serializer.setOutputProperty(OutputKeys.INDENT, "yes");serializer.setOutputProperty(OutputKeys.METHOD, "html");serializer.transform(domSource, streamResult);out.flush();out.close();String result = new String(out.toByteArray());FileUtils.writeStringToFile(new File(aimPath), result, encode);}public class ImageConverter extends WordToHtmlConverter{public ImageConverter(Document document) {super(document);}@Overrideprotected void processImageWithoutPicturesManager(Element currentBlock, boolean inlined, Picture picture){Element imgNode = currentBlock.getOwnerDocument().createElement("img");StringBuffer sb = new StringBuffer();sb.append(Base64.getMimeEncoder().encodeToString(picture.getRawContent()));sb.insert(0, "data:" + picture.getMimeType() + ";base64,");imgNode.setAttribute("src", sb.toString());currentBlock.appendChild(imgNode);}}
}

import fr.opensagres.poi.xwpf.converter.xhtml.Base64EmbedImgManager;
import fr.opensagres.poi.xwpf.converter.xhtml.XHTMLConverter;
import fr.opensagres.poi.xwpf.converter.xhtml.XHTMLOptions;import org.apache.commons.io.FileUtils;
import org.apache.poi.xwpf.usermodel.XWPFDocument;
import java.io.*;/**** docx转html处理*/
public class DocxToHtml {public void docxToHtml( String sourcePath,String aimPath) throws IOException {FileInputStream fileInputStream=new FileInputStream(sourcePath);XWPFDocument docxDocument = new XWPFDocument(fileInputStream);XHTMLOptions options = XHTMLOptions.create();//图片转base64options.setImageManager(new Base64EmbedImgManager());// 转换htm11ByteArrayOutputStream htmlStream = new ByteArrayOutputStream();XHTMLConverter.getInstance().convert(docxDocument, htmlStream, options);fileInputStream.close();docxDocument.close();htmlStream.flush();htmlStream.close();String result = new String(htmlStream.toByteArray());FileUtils.writeStringToFile(new File(aimPath), result, "utf-8");}
}

用到的maven依赖：

计算机毕业设计中用js+html+java实现文件预览相关推荐

计算机毕业设计中用js+html+java文件下载(一)
由于xml文件的格式比较特殊,因为和html存在冲突,所以在这里说明一下我用的是这个标签,因为标签之间的内容不会被当作文档内容解析,而会被用等宽字体直接呈现. @RequestMapping(val ...
java实现文件预览(Office转PDF)
一.首先下载安装openOffice软件,下载地址:http://www.openoffice.org/download/index.html 当然,下载速度特别慢,下面是百度网盘地址. 链接:htt ...
java计算机毕业设计vue.js开发红酒网站源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计vue.js开发红酒网站源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计vue.js开发红酒网站源码+mysql数据库+系统+lw文档+部署本源码技术栈: ...
java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档
java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档 java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档本源码技术栈: 项目架构:B/S ...
java计算机毕业设计Vue.js网上书城管理系统设计与实现服务端MyBatis+系统+LW文档+源码+调试部署
java计算机毕业设计Vue.js网上书城管理系统设计与实现服务端MyBatis+系统+LW文档+源码+调试部署 java计算机毕业设计Vue.js网上书城管理系统设计与实现服务端MyBatis+系统 ...
java计算机毕业设计vue.js开发红酒网站MyBatis+系统+LW文档+源码+调试部署
java计算机毕业设计vue.js开发红酒网站MyBatis+系统+LW文档+源码+调试部署 java计算机毕业设计vue.js开发红酒网站MyBatis+系统+LW文档+源码+调试部署本源码技术栈 ...
java计算机毕业设计Vue.js音乐播放器设计与实现源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计Vue.js音乐播放器设计与实现源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计Vue.js音乐播放器设计与实现源码+mysql数据库+系统+lw文档+部署 ...
计算机毕业设计JavaVue.js网上书城管理系统设计与实现服务端(源码+系统+mysql数据库+lw文档）
计算机毕业设计JavaVue.js网上书城管理系统设计与实现服务端(源码+系统+mysql数据库+lw文档) 计算机毕业设计JavaVue.js网上书城管理系统设计与实现服务端(源码+系统+mysql ...
计算机毕业设计JavaVue.js音乐播放器设计与实现(源码+系统+mysql数据库+lw文档）
计算机毕业设计JavaVue.js音乐播放器设计与实现(源码+系统+mysql数据库+lw文档) 计算机毕业设计JavaVue.js音乐播放器设计与实现(源码+系统+mysql数据库+lw文档) 本源 ...

计算机毕业设计中用js+html+java实现文件预览

计算机毕业设计中用js+html+java实现文件预览相关推荐

最新文章

热门文章