实现截图页面并导出word

1.说明

截图是现在手机应用的最基本的功能，大伙儿都喜欢将自己的手机上的某个画面截图发到朋友圈上。当是在实现的开发时，非APP的应用，我们也需要截图某个页面，将其做成报告或存档。这时笔者将分别介绍使用java的jsp的技术应该如何实现。

2.技术实现

2.1Java技术

使用java技术时，我们需要的是从前端获取到页面的元素，这些元素将会以一个点一个点的写到word文件中。所以，需要提取request的请求的参数，然后写出。核心代码如下：

  int width = Integer.parseInt(request.getParameter("width"));
			int height = Integer.parseInt(request.getParameter("height"));
			BufferedImage result = new BufferedImage(width, height,BufferedImage.TYPE_INT_RGB);
			// 页面是将一个个像素作为参数传递进来的,所以如果图表越大,处理时间越长
			for (int y = 0; y < height; y++) {
			    int x = 0;
			    String[] row = request.getParameter("r" + y).split(",");
			    for (int c = 0; c < row.length; c++) {
                    String[] pixel = row[c].split(":"); // 十六进制颜色数组
			        int repeat = pixel.length > 1?Integer.parseInt(pixel[1]):1;
			        for (int l = 0; l < repeat; l++) {
			            result.setRGB(x, y, Integer.parseInt(pixel[0], 16));
			            x++;
			        }
			    }
			}
			
			Graphics2D g = result.createGraphics();
			// 处理图形平滑度
		
	g.setRenderingHint(RenderingHints.KEY_ANTIALIASING,RenderingHints.VALUE_ANTIALIAS_ON);
saveAsJPEG(100,result,(float) (100 / 100.0),output);
			g.drawImage(result, 0, 0, width, height, null);
			g.dispose();

 /** 
	     * 以JPEG编码保存图片  
	     * @param dpi  分辨率 
	     * @param image_to_save  要处理的图像图片 
	     * @param JPEGcompression  压缩比 
	     * @param fos 文件输出流 
	     * @throws IOException 
	     */  
	    public static void saveAsJPEG(Integer dpi ,BufferedImage image_to_save, float JPEGcompression, FileOutputStream fos) throws IOException {  
	            
	        ImageWriter imageWriter  =   ImageIO.getImageWritersBySuffix("jpg").next();  
	        ImageOutputStream ios  =  ImageIO.createImageOutputStream(fos);  
	        imageWriter.setOutput(ios);  
	        IIOMetadata imageMetaData  =  imageWriter.getDefaultImageMetadata(new ImageTypeSpecifier(image_to_save), null);  
	           
	        if(dpi !=  null && !dpi.equals("")){  
	               
	            Element tree  =  (Element) imageMetaData.getAsTree("javax_imageio_jpeg_image_1.0");  
	            Element jfif  =  (Element)tree.getElementsByTagName("app0JFIF").item(0);  
	            jfif.setAttribute("Xdensity", Integer.toString(dpi) );  
	            jfif.setAttribute("Ydensity", Integer.toString(dpi));  
	               
	        }  
	        if(JPEGcompression >= 0 && JPEGcompression <= 1f){  
	            JPEGImageWriteParam jpegParams  =  (JPEGImageWriteParam) imageWriter.getDefaultWriteParam();  
	            jpegParams.setCompressionMode(JPEGImageWriteParam.MODE_EXPLICIT);  
	            jpegParams.setCompressionQuality(JPEGcompression);  
	        }  
	        
	        imageWriter.write(imageMetaData, new IIOImage(image_to_save, null, null), null);  
	        ios.close();  
	        imageWriter.dispose();  
	    }  

2.2JS技术

使用JS的技术来实现，我们需要借用jQury的函数。可以说，我们截图是页面的某个Table，所以需要指定哪个table需要输出。核心代码如下：

//导出表格数据
function ouputTable()
{
   html2canvas($("#tableID"), {  
                    //    allowTaint: true,  
                    //    taintTest: false,  
                        onrendered: function(canvas) {  
                            canvas.id = "mycanvas";  
                            //生成base64图片数据  
                            var dataUrl = canvas.toDataURL();  
							var tableImg = document.getElementById("tableImg");
							if(tableImg != null)
							{
							  $('#tableImg').removeTag('img');
							}
                            var newImg = document.createElement("img"); 						
                            newImg.src =  dataUrl; 
                             newImg.id="tableImg";	//图片id
                             newImg.hidden = 'true';	//隐藏图片	
                            document.body.appendChild(newImg);  
							
							var imgs = [];
							imgs.push(document.getElementById('tableImg').src);
							
							
							//虚拟创建各种需要的DOM内容，不加入文档流，但使用, style需要在节点中添加
							var $div = $('<div id="myDoc"></div>');
							var $firstPointFirImg = $('<div style="text-align: center;">' + '<img />'+ '\n' + '</div>');
						
							$div.append( $firstPointFirImg);

							//主体函数，即将内容加入到word中
							$.fn.wordExport = function(fileName) {
								fileName = typeof fileName !== 'undefined' ? fileName : "导出";
								var static = {
									mhtml: {
										top: "Mime-Version: 1.0\nContent-Base: " + location.href + "\nContent-Type: Multipart/related; boundary=\"NEXT.ITEM-BOUNDARY\";type=\"text/html\"\n\n--NEXT.ITEM-BOUNDARY\nContent-Type: text/html; charset=\"utf-8\"\nContent-Location: " + location.href + "\n\n<!DOCTYPE html>\n<html>\n_html_</html>",
										head: "<head>\n<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">\n<style>\n+ '_styles_' + \n</style>\n</head>\n",
										body: "<body>_body_</body>"
									}
								};
								var options = {
									maxWidth: 624
								};
								// Clone selected element before manipulating it
								var markup = $(this).clone();


								// Embed all images using Data URLs
								// img如果再文档流中，上面可以不用处理，使用这儿的内容先去创建canvas 然后toDataURL获取uri再进行使用，这里注释是因为上面我们已经将内容转为uri，故不需要做无用功
								var images = Array();
								var img = markup.find('img');
								for (var i = 0; i < imgs.length; i++) {
									var uri = imgs[i];
									$(img[i]).attr("src", imgs[i]);
									img[i].width = '500';
									img[i].height = '900';
									images[i] = {
										type: uri.substring(uri.indexOf(":") + 1, uri.indexOf(";")),
										encoding: uri.substring(uri.indexOf(";") + 1, uri.indexOf(",")),
										location: $(img[i]).attr("src"),
										data: uri.substring(uri.indexOf(",") + 1)
									};
								}
								// Prepare bottom of mhtml file with image data
								var mhtmlBottom = "\n";
								for (var i = 0; i < images.length; i++) {
									mhtmlBottom += "--NEXT.ITEM-BOUNDARY\n";
									mhtmlBottom += "Content-Location: " + images[i].location + "\n";
									mhtmlBottom += "Content-Type: " + images[i].type + "\n";
									mhtmlBottom += "Content-Transfer-Encoding: " + images[i].encoding + "\n\n";
									mhtmlBottom += images[i].data + "\n\n";
								}
								mhtmlBottom += "--NEXT.ITEM-BOUNDARY--";

					//			 TODO: load css from included stylesheet
					//			 styles如果再文档流中可用，否则通过这种方式，无法查找到元素，无法添加样式，故上面将样式内联在dom结构中
								var styles = 'table {border-collapse:collapse; border: 1px solid #000;} td { border: 1px solid #000;} h1 { font-size: 30px; color: red; }'
								// Aggregate parts of the file together
								var fileContent = static.mhtml.top.replace("_html_", static.mhtml.head.replace("_styles_", styles) + static.mhtml.body.replace("_body_", markup.html())) + mhtmlBottom;

								// Create a Blob with the file contents
								var blob = new Blob([fileContent], {
									type: "application/msword;charset=utf-8"
								});
								saveAs(blob, fileName + ".doc");
							}
							$div.wordExport('docName');	
                        }  
                    }); 
}

需要的jQuery的文件如下：

3.总结

以上的截图方法，只是笔者对最近的开发中的应用做了总结，希望对笔者有所帮助。