`

jquery.media.js实现前端页面预览

 
阅读更多
前端代码
<body>
<section layout:fragment="content">
	<div class="form-group">
		<div class="col-md-6">
			<button type="button" class="btn btn-default" onclick="toView('D:\\2.doc')">预览doc</button>
			<button type="button" class="btn btn-default" onclick="toView('D:\\3.docx')">预览docx</button>
			<button type="button" class="btn btn-default" onclick="toPdfView('D:\\4.pdf')">预览pdf</button>
			<button type="button" class="btn btn-default" onclick="toPdfView('D:\\5.pdf')">预览pdf</button>
		</div>
	</div>
	<div class="modal fade" aria-labelledby="预览" aria-hidden="true" id="previewModal">
		<div class="modal-dialog" style="width:1000px;height:800px;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				</div>
				<div class="modal-body"></div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="js/jquery.media.js" th:src="@{/js/jquery.media.js}"></script>
	<script th:inline="javascript">
	function toView(filePath){
		var url = [[@{/converter/preview}]]+'?filePath='+filePath;
		$(".modal-body").empty();
		$(".modal-body").load(url);
		$("#previewModal").modal();
	}
	
	function toPdfView(filePath){
		var url = [[@{/converter/viewPdf}]]+'?filePath='+filePath;
		$(".modal-body").empty();
		$(".modal-body").append('<a class="media">预览pdf</a>');
		$("a.media").attr("href",[[@{/converter/viewPdf}]]+'?filePath='+filePath);
		$("#previewModal").modal();
		$("a.media").attr("href",url)
		$("a.media").media({width:960,height:800});
	}
	
	$("#previewModal").on("hide.bs.modal",function(){
		$(this).removeData("bs.modal");
	});
	</script>
</section>
</body>


java代码
import java.awt.Image;
import java.awt.image.BufferedImage;
import java.io.BufferedOutputStream;
import java.io.ByteArrayInputStream;
import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;

import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletResponse;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

import com.bjdjjs.utils.converter.WordToHtml;

@Controller
@RequestMapping(value = "/converter")
public class OfficeConterverController {
	
	protected final Logger logger = LoggerFactory.getLogger(OfficeConterverController.class);
	
	@Value("${image.temp.folder}")
	private String ImageTempFolder;
	
	@Value("${server.context-path}")
	private String contextPath;
	
	@RequestMapping(value = "/preview")
	public String preview(HttpServletResponse response,
			@RequestParam(value = "filePath", required=true) String filePath){
		logger.info("预览文件:"+filePath);
		WordToHtml wh = new WordToHtml(ImageTempFolder,contextPath);
		ByteArrayOutputStream htmlOutputStream = wh.change(filePath);
		try{
			BufferedOutputStream bos = new BufferedOutputStream(response.getOutputStream());
			bos.write(htmlOutputStream.toByteArray());
			bos.close();
			htmlOutputStream.flush();
		}catch (Exception e) {
			e.printStackTrace();
		} finally{
			if(htmlOutputStream != null){
				try {
					htmlOutputStream.close();
				} catch (IOException e) {
					e.printStackTrace();
				}
			}
		}
		return null;
	}
	
	@RequestMapping(value = "/viewPdf")
	public String viewPdf(HttpServletResponse response,
			@RequestParam(value = "filePath", required=true) String filePath){
		logger.info("预览文件:"+filePath);
		response.setContentType("application/pdf");
		try{
			InputStream pdfInputStream = new FileInputStream(filePath);
			BufferedOutputStream bos = new BufferedOutputStream(response.getOutputStream());
			int pdfByte;
			while((pdfByte = pdfInputStream.read()) != -1){
				bos.write(pdfByte);
			}
			pdfInputStream.close();
			bos.close();
			
		}catch (Exception e) {
			e.printStackTrace();
			return null;
		} 
		return null;
	}
	
	@RequestMapping(value = "/fetchImage")
	public String fetchImage(HttpServletResponse response,
			@RequestParam(value = "n", required=true) String fileName){
		logger.info("获取图片:"+fileName);
		try {
			BufferedImage image = ImageIO.read(new File(ImageTempFolder+fileName));
			ImageIO.write(image, "png", response.getOutputStream());
			response.setContentType("image/png");
			ImageIO.write(image, "png", response.getOutputStream());
		} catch (IOException e) {
			e.printStackTrace();
		}
		return null;
	}
	
	@RequestMapping(value = "/test")
	public String test(){
		logger.info("测试页面");
		return "test/preview";
	}
	
}


工具类
package com.bjdjjs.utils.converter;

import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.List;

import javax.imageio.ImageIO;
import javax.xml.parsers.DocumentBuilderFactory;
import javax.xml.parsers.ParserConfigurationException;
import javax.xml.transform.OutputKeys;
import javax.xml.transform.Transformer;
import javax.xml.transform.TransformerException;
import javax.xml.transform.TransformerFactory;
import javax.xml.transform.dom.DOMSource;
import javax.xml.transform.stream.StreamResult;

import org.apache.poi.hwpf.HWPFDocument;
import org.apache.poi.hwpf.converter.PicturesManager;
import org.apache.poi.hwpf.converter.WordToHtmlConverter;
import org.apache.poi.hwpf.usermodel.Picture;
import org.apache.poi.hwpf.usermodel.PictureType;
import org.apache.poi.xwpf.converter.core.BasicURIResolver;
import org.apache.poi.xwpf.converter.core.FileImageExtractor;
import org.apache.poi.xwpf.converter.core.FileURIResolver;
import org.apache.poi.xwpf.converter.core.IURIResolver;
import org.apache.poi.xwpf.converter.xhtml.XHTMLConverter;
import org.apache.poi.xwpf.converter.xhtml.XHTMLOptions;
import org.apache.poi.xwpf.usermodel.XWPFDocument;
import org.apache.poi.xwpf.usermodel.XWPFPictureData;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.w3c.dom.Document;


public class WordToHtml {
	
	protected final Logger logger = LoggerFactory.getLogger(WordToHtml.class);
	
	private String ImageTempFolder;
	
	private String contextPath;
	
	//返回图片请求地址
	private static String ImageRequestMap = "/converter/fetchImage?n=";
	
	private static String WORD2003 = "doc";
	
	private static String WORD2007 = "docx";
	
	public WordToHtml(String imageTempFolder,String contextPath){
		this.ImageTempFolder = imageTempFolder;
		this.contextPath = contextPath;
	}
	
	public  ByteArrayOutputStream change(String filePath) {
		 int index = filePath.lastIndexOf(".");
		 String fileType = filePath.substring(index+1, filePath.length());
	     try {
	    	 if(WORD2003.equalsIgnoreCase(fileType))
	            return convert2Html(filePath);  
	    	 else if(WORD2007.equalsIgnoreCase(fileType))
	    		 return xconvert2Html(filePath);
	        } catch (Exception e) {  
	            e.printStackTrace();
	        }
	     return null;
    }
	
	public  ByteArrayOutputStream convert2Html(String filePath)  
            throws TransformerException, IOException,  
            ParserConfigurationException {  
        HWPFDocument wordDocument = new HWPFDocument(new FileInputStream(filePath));//创建一个文档  
        WordToHtmlConverter wordToHtmlConverter = new WordToHtmlConverter(  
                DocumentBuilderFactory.newInstance().newDocumentBuilder()  
                        .newDocument());//对普通文本的操作
         wordToHtmlConverter.setPicturesManager( new PicturesManager()  
         {  
             public String savePicture( byte[] content,  
                     PictureType pictureType, String suggestedName,  
                     float widthInches, float heightInches )  
             {  
                 return contextPath+ImageRequestMap+suggestedName;  
             }  
         } );//对图片的操作
        wordToHtmlConverter.processDocument(wordDocument);  
        //保存图片  
        List pics=wordDocument.getPicturesTable().getAllPictures();  
        if(pics!=null){  
            for(int i=0;i<pics.size();i++){  
                Picture pic = (Picture)pics.get(i);  
                System.out.println();  
                try {  
                    pic.writeImageContent(new FileOutputStream(ImageTempFolder  
                            + pic.suggestFullFileName()));  
                } catch (FileNotFoundException e) {  
                    e.printStackTrace();  
                }    
            }  
        }  
        Document htmlDocument = wordToHtmlConverter.getDocument();  
        ByteArrayOutputStream out = new ByteArrayOutputStream();  
        DOMSource domSource = new DOMSource(htmlDocument);  
        StreamResult streamResult = new StreamResult(out);  
        TransformerFactory tf = TransformerFactory.newInstance();  
        Transformer serializer = tf.newTransformer();  
        serializer.setOutputProperty(OutputKeys.ENCODING, "UTF-8");  
        serializer.setOutputProperty(OutputKeys.INDENT, "yes");  
        serializer.setOutputProperty(OutputKeys.METHOD, "html");  
        serializer.transform(domSource, streamResult);  
        out.close();  
        return out;
    } 
	
	public ByteArrayOutputStream xconvert2Html(String filePath)  
            throws TransformerException, IOException,  
            ParserConfigurationException {  
        InputStream inputStream = new FileInputStream(new File(filePath));
        XWPFDocument document = new XWPFDocument(inputStream);
        XHTMLOptions options = XHTMLOptions.create().indent(1);
        File imageFolderFile =new File(ImageTempFolder);
        FileImageExtractor extractor = new FileImageExtractor(imageFolderFile);
        options.setExtractor(extractor);
        options.setIgnoreStylesIfUnused(false);
        options.setFragment(true);
        options.URIResolver(new BasicURIResolver(contextPath+ImageRequestMap));
        ByteArrayOutputStream out = new ByteArrayOutputStream(); 
        XHTMLConverter.getInstance().convert(document, out, options);
        out.close();
        return out;
    } 
}
分享到:
评论

相关推荐

    jquery.media.js在线媒体播放插件

    jquery.media.js在线媒体播放插件。 jquery.media.js在线预览pdf插件。...jquery.media.js 是一个在网页中嵌入多媒体文件的前端插件,必须使用HTML标签,此插件不仅支持视频媒体播放而且还支持线预览pdf。

    Jquery.media.jsPDF前端预览插件

    **jQuery.media.js PDF前端预览插件** 在Web开发中,提供PDF文件的前端预览功能对于提升用户体验至关重要。jQuery.media.js是一个强大的JavaScript库,它允许开发者在网页中轻松集成多媒体内容,包括PDF文档的预览...

    jquery.media.js

    前端html实现在线查看PDF文件,PDF预览,只需要在html中引入这个jar包,配置PDF的路径即可在线预览。

    jquery.jqprint-0.3.js

    本文将详细介绍jQuery的一个扩展插件——jQuery.jqprint-0.3.js,它专门用于实现简单的页面或元素打印功能。 jQuery.jqprint-0.3.js是基于jQuery库的一个轻量级插件,其主要目的是简化网页元素的打印操作。在不涉及...

    jQuery.print实现打印(导出)Html页面

    首先,jQuery.print是基于流行的JavaScript库jQuery的一个插件,它允许开发者轻松地将特定的DOM元素或者整个页面内容打印到打印机或者生成预览。在网页中,我们经常使用HTML表格来展示结构化的数据,而jQuery.print...

    media DEMO

    这个DEMO涵盖了前端开发中的多个知识点,包括jQuery库的使用、JavaScript事件处理、媒体元素的操纵以及PDF文件的在线预览。通过学习和实践这个DEMO,开发者能够提升他们在网页交互设计上的技能,为用户提供更丰富的...

    jQuery图片灯箱预览效果.zip

    jQuery,作为一款广泛使用的JavaScript库,提供了丰富的功能和简便的API,使得实现图片灯箱预览效果变得相对简单。本文将深入探讨如何利用jQuery实现这一功能,并结合“jQuery图片灯箱预览效果.zip”中的示例进行...

    jQuery响应式图片放大预览.zip

    在这个“jQuery响应式图片放大预览.zip”压缩包中,我们很可能会找到一个实现图片预览功能的解决方案,这个功能适用于各种屏幕尺寸,即所谓的响应式设计。以下是对这个主题的详细讲解: 1. **jQuery基础**:jQuery...

    jQuery+modernizr.js瀑布流图片预加载动画特效

    在这个案例中,jQuery被用来处理图片的加载和动画效果,例如在页面滚动时逐个显示图片,以及实现图片点击后放大预览的功能。 Modernizr.js则是一个前端检测库,它可以帮助开发者检测浏览器对HTML5和CSS3新特性的...

    java使用aspose实现文件预览工功能.rar

    `jquery.media.js`是一个前端JavaScript库,它是jQuery的一个插件,用于播放多媒体内容,包括HTML5视频、音频以及PDF等。在这个场景下,它很可能被用来在网页上显示预览的PDF文件或者动态生成的图片。 `pom.xml`是...

    页面实现预览和打印(页面整体打印和局部打印)

    在JSP中,可以使用JavaScript或者jQuery来实现上述逻辑。例如,可以将预览和打印的逻辑封装成函数,通过AJAX获取需要打印的数据,然后动态构建HTML并应用到上述的iframe或隐藏元素中。 此外,为了提供更高级的预览...

    京东官网CSS-JQuery实现

    在交互设计方面,京东官网利用JQuery的动画功能实现了一些复杂的效果,如购物车的动态增删商品、商品图片的放大预览等。同时,JQuery还提供了便利的插件系统,如轮播图插件(如jQuery.Slider)、时间选择插件...

    jQuery滚动页面显示文章预览进度条代码

    本文将详细介绍如何使用jQuery实现滚动页面显示文章预览进度条的功能。 首先,我们需要理解这个功能的基本原理。当用户滚动页面时,我们通过jQuery监听滚动事件,然后计算当前可视区域与整个文档的高度比例,这个...

    如何前端实现在线预览pdf、word、xls、ppt等文件

    第二种方法是利用`jquery.media.js`插件。该插件支持多种媒体文件的预览,包括PDF文档。虽然它提高了交互性和灵活性,但需要引入外部的JavaScript文件,且对于Word文档等其他格式文件依然存在兼容性问题。 第三种...

    jq圆形缩略图预览 jquery+css3圆形缩略图预览.zip

    在本项目中,“jq圆形缩略图预览 jquery+css3圆形缩略图预览.zip”是一个使用jQuery和CSS3技术实现的圆形缩略图预览功能。这个压缩包包含了实现这一功能所需的代码和资源。以下是对这个项目的详细解读: 1. **...

    jquery调用打印机打印

    `jQuery`,作为广泛使用的JavaScript库,提供了便利的方式来实现这一需求。本文将深入探讨如何利用`jQuery`调用打印机打印功能,以及相关知识点。 首先,我们需要理解浏览器的打印机制。在Web环境下,打印通常是...

    web前端原型

    JavaScript是实现Web前端交互的关键,通过jQuery、React、Vue等库或框架,开发者可以轻松地处理DOM操作、事件监听、异步请求等任务。在原型设计中,JavaScript常用于模拟实际功能,比如按钮点击后的响应、表单验证、...

    商城 前端 html 页面 模板

    这些元素通常使用JavaScript或者库如jQuery来实现动态交互,提高用户的参与度。例如,添加到购物车的动画效果、商品图片的放大预览等。 5. **SEO优化**: 一个高质量的商城前端模板会考虑搜索引擎优化(SEO),包括...

    宝丽来Photobar画廊jquery代码.zip

    宝丽来Photobar画廊是一种基于jQuery的前端展示方式,它模仿了经典的宝丽来照片效果,为网页添加了一种独特且有趣的图片展示体验。这个压缩包中的代码资源包括了实现这种效果所需的HTML5、jQuery、JavaScript和CSS...

    JS打印的几种实现方法

    在JavaScript(JS)中,打印功能是通过浏览器的内置API来实现的,允许用户将网页内容或者特定元素输出到打印机。这篇博客文章“JS打印的几种实现方法”可能探讨了如何利用JavaScript进行打印操作的不同技术。以下是...

Global site tag (gtag.js) - Google Analytics