前端頁面用html2Canvas+jsPdf(vue+jsp)轉成PDF和java轉pdf

1.后端代碼：

import com.itextpdf.text.Document;
import com.itextpdf.text.Image;
import com.itextpdf.text.PageSize;
import com.itextpdf.text.pdf.PdfWriter;
import sun.misc.BASE64Decoder;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.FileOutputStream;
import java.io.IOException;

 

/**
     *
     * @param request
     * @param response
     * @throws DocumentException
     * @throws MalformedURLException
     * @throws IOException
     */
    @RequestMapping(value = "createPDF.do", method = RequestMethod.POST)
    @ResponseBody
    public void createPDF(HttpServletRequest request, HttpServletResponse response) throws IOException, com.itextpdf.text.DocumentException {
        String imgStr=request.getParameter("image");
        byte[] b=GenerateImage(imgStr.replace("data:image/png;base64,", ""));
        // 1.新建document對象
        Document document = new Document(PageSize.A4,20,20,10,10);

        // 2.建立一個書寫器(Writer)與document對象關聯，通過書寫器(Writer)可以將文檔寫入到磁盤中。
        // 創建 PdfWriter 對象 第一個參數是對文檔對象的引用，第二個參數是文件的實際名稱，在該名稱中還會給出其輸出路徑。
        PdfWriter writer = PdfWriter.getInstance(document, new FileOutputStream("D:/jsjPdf.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();
        //關閉書寫器
        writer.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;

    }

2.前端代碼：(vue+jsp)

htmlToPdf : function () {
                // $("#pdf").click(function(){
                    // 導出之前先將滾動條置頂,不然會出現數據不全的現象
                    // window.pageYOffset = 0;
                    // document.documentElement.scrollTop = 0
                    // document.body.scrollTop = 0
                
                 9                     html2canvas(document.body, {
                        onrendered: function(canvas) {
                            //把截取到的圖片替換到a標簽的路徑下載
                            $("#download").attr('href',canvas.toDataURL());
                            $.post("/xxx/xxx/createPDF.do",{
                                image:canvas.toDataURL()
                            },function(result){
                                let contentWidth = canvas.width
                                let contentHeight = canvas.height

                                //一頁pdf顯示html頁面生成的canvas高度;
                                let pageHeight = contentWidth / 592.28 * 841.89
                                //未生成pdf的html頁面高度
                                let leftHeight = contentHeight
                                //頁面偏移
                                let position = 0
                                //a4紙的尺寸[595.28,841.89]，html頁面生成的canvas在pdf中圖片的寬高
                                let imgWidth = 595.28
                                let imgHeight = 592.28 / contentWidth * contentHeight

                                let pageData = new Image();
                                //設置圖片跨域訪問
                                // pageData.setAttribute('crossOrigin', 'Anonymous');

                                // setTimeout(() => {
                                pageData = canvas.toDataURL('image/jpeg', 0.5);//  參數：圖片格式和清晰度(0-1)
                                var PDF = new jsPDF('', 'pt', 'a4');
                                //有兩個高度需要區分，一個是html頁面的實際高度，和生成pdf的頁面高度(841.89)
                                //當內容未超過pdf一頁顯示的范圍，無需分頁
                                if (leftHeight < pageHeight) {
                                    PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
                                } else {
                                    while (leftHeight > 0) {
                                        PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                                        leftHeight -= pageHeight
                                        position -= 841.89
                                        //避免添加空白頁
                                        if (leftHeight > 0) {
                                            PDF.addPage()
                                        }
                                    }
                                }
                                PDF.save("JOB操作頁" + '.pdf')
                                // }, 1000);
                                54                             });

                            //下載下來的圖片名字
                            // $("#download").attr('download','share.png') ;
                            // document.body.appendChild(canvas);
                        },
                        //useCORS: true,    //解決資源跨域問題
                        // allowTaint: true,不允許跨域圖片污染畫布
                        // logging:true,
                        //可以帶上寬高截取你所需要的部分內容
                        //
                        //     width: 300,
                        //     height: 30069                     });
                // });


            }

3.java需要用到的依賴

　　　　　<dependency>
            <groupId>com.itextpdf</groupId>
            <artifactId>itextpdf</artifactId>
            <version>5.5.13.1</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/com.itextpdf/itext-asian -->
        <dependency>
            <groupId>com.itextpdf</groupId>
            <artifactId>itext-asian</artifactId>
            <version>5.2.0</version>
        </dependency>

4.前端需要引入的js

<!-- 如果你需要把數據傳到后段，你還要引入jquery的js （去百度找一找）-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>

5.html

<button id="pdf" @click="htmlToPdf" type="button" class="btn btn-primary ibox-tools_btn" >轉PDF</button>
                            <a id="download">下載</a>

6.效果圖：

不過在使用HTML2canvas把jsp頁面轉成圖片的時候會在圖片上出現一些奇怪的函數

 

原理：html2canvas庫的工作原理並不是真正的“截圖”，而是讀取網頁上的目標DOM節點的信息來繪制canvas，所以它並不支持所有的css屬性（像上面的截圖的紅圈中就有復選框沒有顯示出來）。

通過html2canvas把DOM節點轉成圖片，然后在通過jsPDF把圖片插入到pdf中

Jspdf是一個將html內容生成pdf文件的庫，原理是對輸入瀏覽器的文字或二進制圖片進行base64編碼轉換，以pdf中應有的形式組織，最終以data uri scheme,data:application/pdf;base64;[content] 的格式輸出

其實在前端就可以把頁面轉成pdf的格式了，如果你需要在后端進行轉pdf,就需要把圖片的base64編碼傳到后台就行了（上面代碼里有寫）

 

使用html2Canvas會現的一些問題：

https://www.jianshu.com/p/22bd5b98e38a