實現截圖頁面並匯出word
阿新 • • 發佈：2019-01-29
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.總結
以上的截圖方法，只是筆者對最近的開發中的應用做了總結，希望對筆者有所幫助。