前端页面用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