html2canvas.js+itext+pdf.js将网页转化成图片，利用itext将图片转化成pdf保存

最新推荐文章于 2025-07-22 11:23:29 发布

原创最新推荐文章于 2025-07-22 11:23:29 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #pdf #前端

java开发专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一种使用前端技术将网页内容截图并转换为PDF的方法。通过html2canvas库捕获网页区域，将其转换为图像，再利用jsPDF库生成PDF文件。提供了两种实现方案：一种是将生成的数据发送到服务器进行处理；另一种是完全在前端完成PDF的生成与下载。

直接上代码了

前端代码：

<html>
<head>
    <title>Title</title>
</head>
<body>
<input type="button" value="截图" onclick="takeScreenshot()">
<div id="view">
    <div id="mycanvas">

    </div>
</div>
</body></html>

引用得js

<script type="text/javascript" src="application/career/explore/js/html2canvas.js"></script>
<script type="text/javascript" src="application/career/explore/js/jsPdf.debug.js"></script>

<script>
    jQuery(document).ready(function() {
       jQuery.get(contextPath + "/application/career/selfWork/myInterest/new_detail.jsp",function(html){
            jQuery("#mycanvas").html(html);
        });
    });
    function takeScreenshot() {
        html2canvas(document.getElementById("mycanvas")).then(function(canvas) {
           document.body.appendChild(canvas);
            canvas.id = "mycanvas";
            // 生成base64图片数据
            var dataUrl = canvas.toDataURL('image/png'); //指定格式，也可不带参数
            var formData = new FormData(); //模拟表单对象
            formData.append("imgData", convertBase64UrlToBlob(dataUrl)); //写入数据
            var xhr = new XMLHttpRequest(); //数据传输方法
            xhr.open("POST", "./exportPdf.do"); //配置传输方式及地址
            xhr.send(formData);
            xhr.onreadystatechange = function() { //回调函数
                if(xhr.readyState == 4) {
                    if(xhr.status == 200) {
                        var back = JSON.parse(xhr.responseText);
                        if(back.success == true) {
                            alertBox({ content: 'Pdf导出成功！', lock: true, drag: false, ok: true });
                        } else {
                            alertBox({ content: 'Pdf导出失败！', lock: true, drag: false, ok: true });
                        }
                    }
                }
            }
        });
    }
    function downpdf(){
        html2canvas(document.getElementById("mycanvas"), {
            onrendered:function(canvas) {

                var contentWidth = canvas.width;
                var contentHeight = canvas.height;
                //一页pdf显示html页面生成的canvas高度;
                var pageHeight = contentWidth / 595.28 * 841.89;
                //未生成pdf的html页面高度
                var leftHeight = contentHeight;
                //pdf页面偏移
                var position = 0;
                //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
                var imgWidth = 555.28;
                var imgHeight = 555.28/contentWidth * contentHeight;

                var pageData = canvas.toDataURL('image/jpg', 1.0);

                var pdf = new jsPDF('', 'pt', 'a4');
                //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
                //当内容未超过pdf一页显示的范围，无需分页
                if (leftHeight < pageHeight) {
                    pdf.addImage(pageData, 'JPG', 20, 0, imgWidth, imgHeight );
                } else {
                    while(leftHeight > 0) {
                        pdf.addImage(pageData, 'JPG', 20, position, imgWidth, imgHeight)
                        leftHeight -= pageHeight;
                        position -= 841.89;
                        //避免添加空白页
                        if(leftHeight > 0) {
                            pdf.addPage();
                        }
                    }
                }

                pdf.save('content.pdf');
            }
        })
    }
    //将以base64的图片url数据转换为Blob
    function convertBase64UrlToBlob(urlData) {
        //去掉url的头，并转换为byte
        var bytes = window.atob(urlData.split(',')[1]);
        //处理异常,将ascii码小于0的转换为大于0
        var ab = new ArrayBuffer(bytes.length);
        var ia = new Uint8Array(ab);
        for(var i = 0; i < bytes.length; i++) {
            ia[i] = bytes.charCodeAt(i);
        }
        return new Blob([ab], { type: 'image/png' });
    }
</script>

第一个方法是将数据传到后台保存起来

第二个方法是在前端利用pdf.js将网页直接下载为pdf

下面粘贴出后台得代码：

@Controller
public class TestController2 extends CommonController{
    @RequestMapping("/exportPdf")
    public  void exportPdf(MultipartHttpServletRequest request, HttpServletResponse response) throws Exception {
        ResultData result = new ResultData(); //自定义结果格式
        String filePath = "e:\\111.pdf";
        String imagePath = "e:\\111.bmp";
        Document document = new Document();
       // Document document = new Document(PageSize.A4, 20, 20, 20, 20);
        try{
            Map getMap = request.getFileMap();
            MultipartFile mfile = (MultipartFile) getMap.get("imgData"); //获取数据
            InputStream file = mfile.getInputStream();
            byte[] fileByte = FileCopyUtils.copyToByteArray(file);

            FileImageOutputStream imageOutput = new FileImageOutputStream(new File(imagePath));//打开输入流
            imageOutput.write(fileByte, 0, fileByte.length);//生成本地图片文件
            imageOutput.close();
            FileOutputStream fileOutputStream = new FileOutputStream(filePath);
            PdfWriter.getInstance(document,fileOutputStream); //itextpdf文件
          // document.setPageSize(PageSize.A4);
            document.setPageCount(2);
            Rectangle pageSize = new Rectangle(595.0F, 842.0F*4);
            document.setPageSize(pageSize);
            document.open();
           // document.add(new Paragraph("JUST TEST ..."));
            Image image = Image.getInstance(imagePath); //itext-pdf-image
            float heigth = image.getHeight();
            float width = image.getWidth();
           int percent = getPercent2(heigth, width);  //按比例缩小图片
            image.setAlignment(Image.MIDDLE);
           // image.scaleAbsolute(mmTopx(150), mmTopx(500));// 直接设定显示尺寸
            image.scalePercent(percent+3);
            document.add(image);
            document.close();

            result.setSuccess(true);
        }catch (DocumentException de) {
            System.err.println(de.getMessage());
        }
        catch (Exception e) {
            e.printStackTrace();
            result.setSuccess(false);
        }
        sendJsonMessage(response,result);
    }

    private static int getPercent2(float h, float w) {
        int p = 0;
        float p2 = 0.0f;
        p2 = 530 / w * 100;
        p = Math.round(p2);
        return p;
    }

    public static int getPercent(float h, float w) {
        int p = 0;
        float p2 = 0.0f;
        if (h > w) {
            p2 = 297 / h * 100;
        } else {
            p2 = 210 / w * 100;
        }
        p = Math.round(p2);
        return p;
    }

    public static float mmTopx(float mm){
        mm = (float) (mm *3.33) ;
        return mm ;
    }
}

后台代码得内容主要是将图片转化为pdf。需要引入得包有：iText-2.1.7.jar,iTextAsian.jar ，这里关键是让图片以什么样得缩放比例转化成pdf，这里还需要自己去调试，我也找不到一个完美得方法。

Rectangle pageSize = new Rectangle(595.0F, 842.0F*4);

image.scalePercent(percent+3);

核心就是选择纸张大小，和图片得缩放比例了

// image.scaleAbsolute(mmTopx(150), mmTopx(500));// 直接设定显示尺寸

也可以直接设定尺寸