jsp生成pdf（html2canvas.js使用）

阿新 • • 發佈：2019-01-20

前段時間有個電子簽章的需求，需要將jsp頁面內容生成pdf檔案，然後傳給電子簽章。自己嘗試過集中方法，有的整合麻煩，需要引入報表。再就是速度慢，流程很長，不適用於高併發。這裡整理了一個了很簡單靈活的方法，而且很方便理解。

程式碼思路：

jsp頁面通過html2canvas.js來擷取div轉成image圖片，然後將圖片提交到服務端，服務端建立pdf檔案將圖片插進去。

資源依賴：html2canvas.js (擷取圖片) itextpdf-5.5.9.jar（生成pdf檔案）

前端原始碼：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 
<title>Test</title> 
<style type="text/css"> 
*{ 
  margin:0 auto; 
  padding:0; 
} 
.btn{ 
  width:100px; 
  height:30px; 
  line-height:30px; 
  background:green; 
  color:#fff; 
  border-radius:10px; 
  -webkit-border-radius:10px; 
  text-align:center; 
  display:block; 
  text-decoration:none; 
  } 
.container{ 
  background:#e5e5e5; 
} 
</style> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
<script src="https://cdn.bootcss.com/html2canvas/0.4.1/html2canvas.js"></script> 
<script> 
$(function(){ 
  $("#btn").click(function(){ 
    html2canvas($("#container"), { 
      onrendered: function(canvas) { 
        //把擷取到的圖片替換到a標籤的路徑下載 
        //$("#download").attr('href',canvas.toDataURL()); 
        alert(canvas.toDataURL());
        $.post("<%=request.getContextPath()%>/test",{image:canvas.toDataURL()},function(result){
            alert("成功");
          });
        //下載下來的圖片名字 
        //$("#download").attr('download','share.png') ;  
        //document.body.appendChild(canvas); 
      },
	useCORS: true	//解決資源跨域問題  
//可以帶上寬高擷取你所需要的部分內容 
//     , 
//     width: 300, 
//     height: 300 
    }); 
  }); 
}); 
</script> 
</head> 
  
<body> 
  <div style="padding:10px 0"> 
    <div class="btn" id="btn">擷取螢幕</div> 
    <p style="color:red; text-align:center;">先點選擷取屏幕後再點選截圖下載</p> 
    <div style="margin-top:10px"> 
      <a href="javascript:;" rel="external nofollow" class="btn" id="download">截圖下載</a> 
    </div> 
  </div> 
  <div class="container" id="container"> 
    <p style="text-align:center">以下是測試內容</p> 
    <img src="http://a.hiphotos.baidu.com/image/pic/item/9f510fb30f2442a76160eca6dd43ad4bd1130242.jpg"> 
  </div> 
</body> 
</html>

服務端原始碼：

public void createPDF(HttpServletRequest request, HttpServletResponse response) throws DocumentException, MalformedURLException, IOException{
		String imgStr=request.getParameter("image");
		byte[] b=GenerateImage(imgStr.replace("data:image/png;base64,", ""));
		
		
		 // 1.新建document物件
        Document document = new Document();

        // 2.建立一個書寫器(Writer)與document物件關聯，通過書寫器(Writer)可以將文件寫入到磁碟中。
        // 建立 PdfWriter 物件 第一個引數是對文件物件的引用，第二個引數是檔案的實際名稱，在該名稱中還會給出其輸出路徑。
        PdfWriter writer = PdfWriter.getInstance(document, new FileOutputStream("D:/chenggong.pdf"));

        // 3.開啟文件
        document.open();

        // 4.新增一個內容段落
        //document.add(new Paragraph("Hello World!"));

        //圖片1
        Image image1 = Image.getInstance(b);
        //設定圖片位置的x軸和y周
        image1.setAbsolutePosition(100f, 550f);
        //設定圖片的寬度和高度
        image1.scaleAbsolute(200, 200);
        //將圖片1新增到pdf檔案中
        document.add(image1);

        // 5.關閉文件
        document.close();
	}

/** 
     * base64字串轉化成圖片 
     * @param imgStr 
     * @return 
	 * @throws IOException 
     */  
	public byte[] GenerateImage(String imgStr) throws IOException { // 對位元組陣列字串進行Base64解碼並生成圖片
		// if (imgStr == null) // 影象資料為空
		BASE64Decoder decoder = new BASE64Decoder();

		// Base64解碼
		byte[] b = decoder.decodeBuffer(imgStr);
		for (int i = 0; i < b.length; ++i) {
			if (b[i] < 0) {// 調整異常資料
				b[i] += 256;
			}
		}
		// 生成jpeg圖片
		// String imgFilePath = "E:/test33.jpg";// 新生成的圖片
		// OutputStream out = new FileOutputStream(imgFilePath);
		// out.write(b);
		// out.flush();
		// out.close();
		return b;

	}

這只是個簡單的demo，具體尺寸引數根據需求配置

注意：html2canvas擷取部分，如果資料是以特有的標籤賦值請修改賦值方式，比如C標籤的迴圈方式賦值，這時候可能擷取的頁面會亂，這個方法生成的pdf只有圖片，如果要文字編輯那麼請採用報表形式生成

jsp生成pdf（html2canvas.js使用）

前段時間有個電子簽章的需求，需要將jsp頁面內容生成pdf檔案，然後傳給電子簽章。自己嘗試過集中方法，有的整合麻煩，需要引入報表。再就是速度慢，流程很長，不適用於高併發。這裡整理了一個了很簡單靈活的方法，而且很方便理解。程式碼思路：jsp頁面通過html2canvas.js來

根據圖片的URL生成PDF保存到本地（前臺js）

避免就會需要 uri con bug 是個 tput llb //需要引用html2canvas.js和jspdf.js SavePDF:function(e){ var that = this; $.post("/Biz/D

二維碼生成（QRCode.js）

結果 phone rec max andro javascrip user doc area 什麽是 QRCode.js？ QRCode.js 是一個用於生成二維碼的 JavaScript 庫。主要是通過獲取 DOM 的標簽,再通過 HTML5 Canvas 繪制而成,不依

【Java】itext根據模板生成pdf（包括圖片和表格）

金額 res report als fields positions 創建模板 bst open() 1、導入需要的jar包：itext-asian-5.2.0.jar itextpdf-5.5.11.jar。 2、新建word文檔，創建模板，將文件另存為pdf，並用Ado

二維碼的兩種生成方法（前端js生成，後端java生成）

package com.payplatform.util; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import java.util.HashMap; import java.u

JFina連線資料庫（mysql）並執行增刪改操作+jsp（vue.js）

先給大家看一下我專案的整個構造 1.首先把JFinal基本的框架搭建好，那麼第一步，就是匯入依賴： <dependency> <groupId>junit</groupId> <artifactId>juni

封裝的一套簡單輕量級JS 類庫（RapidDevelopmentFramework.JS）

需要 and arr ucc rda 找到目的 tco 類庫 1.最近好久沒有更新自己的博客了，一直在考慮自己應該寫一些什麽。4.2日從蘇州回到南京的路上感覺自己的內心些崩潰和失落，我就不多說了? 猛然之間我認為自己需要找一下內心的平衡。決定開發屬於自己一套快速開發的JS

數字鍵盤（純js）

outb htm -a 字符 cit style elements nim 實現實現的要求：第一位不能是0 不能同時出現兩個"." 最後一位不能是"." 只能輸入n位小數註意：在ios中input會出現光標，可以加上

JSP復習（part 2 ）

war setattr current ren 客戶端代碼 body 練習 params 3.4.2 訪問（獲取）請求參數 1.方法 String 字符串變量 =request.getParamete

JSP復習（part 3 ）

響應頭 utf 瀏覽器聲明數據 thead code 直接 web服務器 3.4.4 request對象提供了一些用來獲取客戶信息的方法，利用這些方法，可以獲取客戶端的IP地址協議等有關信息 3.5 request對象和response對象相對應，用於

JSP復習（part 4）

com name script out java 內置當前時間 jsp getc 3.5.2 重定向網頁使用response對象中的sendRedirect（）方法實現一個重定向到另一個頁面。例如： resp

JSP的範圍（作用域）

如果用戶請求方法 str tro 不同 include 來看 JSP的範圍（作用域）在JSP頁面中的對象，包括用戶創建的對象如JavaBean，都有一個範圍屬性，這個範圍也被叫做“作用域”。範圍定義了在什麽時間內，在哪一個JSP頁面中可以訪問這些對象。例如，sess

MFC與Webbrowser交互（通過JS）

omv .cn amp c++ ocs scrip spa script files 最近修改老舊的MFC項目，用的網頁做界面，和HTML交互采用的是COM方式，繁瑣，醜陋又性能低，於是考慮利用js來進行界面交互，查了一天的資料，現在整理如下，供後來需要的人參考，雖然大概幾

移動端滑動條（原生JS）

顏色 empty || 原生 pre border relative innerhtml 課程 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

四則運算生成程序（python版）

本地化 tee 情況 class 數字是否波蘭表達式 api 提示四則運算題目生成—基於控制臺項目托管在碼雲：飛機票需求分析根據控制臺提示信息，輸入題目生成相關配置參數題目生成數量數字範圍式子中是否有分數 .... 程序支持 10000 題目生成

[對抗訓練]20180117，Linux下自動生成flag（v0.1）

itl kill 查看 src nbsp 定時 ssl pla 用戶 [對抗訓練]20180117，Linux下自動生成flag （v0.1）設置目標靶機（Linux）定時生成flag的過程。在靶機終端登錄root用戶使用命令 su ，然後輸入roo

jsonp跨域寫淘寶搜索聯想詞（原生js）

div 註意 abs scrip 基礎屬性體驗 blur ext 一、主體 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset=

Elasticsearch技術解析與實戰 PDF （內含目錄）

setting 4.6 2.2.3 tps 重寫約定系統檢測概念 Elasticsearch技術解析與實戰下載地址：https://pan.baidu.com/s/1q46lwAqzbUMs0qbKyBNBqg 關註微信公眾號獲取提取碼：　　輸入：esj

從尾到頭打印鏈表（基於js）

tail nsh module != [] fff node color 方法輸入一個鏈表，按鏈表值從尾到頭的順序返回一個ArrayList。首先你得知道什麽是鏈表，可以參考把當前的Node的val值用 unshift 方法放進數組，然後指針後移，循環該步驟直到鏈表尾

實現word轉pdf，HTML轉pdf（探索篇）

ner ase node eth ack line prope fin -o 筆者找依賴的jar包，找的好辛苦。 ITextRenderer、ITextFontResolver這兩個類依賴的jar包到底是哪個，還有怎麽下載？苦苦糾結了3個小時。終於找到你了！記錄個網址：ht

jsp生成pdf（html2canvas.js使用）

相關推薦