网页截屏生产pdf或者截取某个标签生产pdf(打印某个标签)

最新推荐文章于 2026-06-07 19:40:23 发布

原创最新推荐文章于 2026-06-07 19:40:23 发布 · 1.3k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#pdf #截屏 #js #插件 #打印

js 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用html2canvas.js插件截取网页内容生成图片，然后通过前端将图片发送至后台，利用Java将图片转换为PDF。html2canvas并非真实截图，而是基于DOM和样式渲染到canvas上，可能与原始页面存在差异。前端代码涉及图片生成和发送，而后台处理图片转PDF的逻辑。

将网页截屏生产pdf或者截取某个标签生产pdf，

其中截屏用的是插件是html2canvas.js这个脚本，

代码很简单（因为我没有深入研究，所以对这个插件有bug不是很清楚。使用html2canvas,对整个或局部页面进行‘截图’。但这并不是真的截图，而是通过遍历页面DOM结构，收集所有元素信息及相应样式，渲染出canvas image，html2canvas只能将它能处理的生成canvas image，因此渲染出来的结果并不是100%与原来一致。但它不需要服务器参与，整个图片都由客户端浏览器生成，使用很方便。）

代码：

 $("#printScreen").click(function () {//截图,某一个标签，要是想全屏的话就直接把"document.querySelector("#div")"替换成"document.body"
            html2canvas(document.querySelector("#div"), { //截图对象
                //此处可配置详细参数
                onrendered: function(canvas) { //渲染完成回调canvas
                    canvas.id = "mycanvas";
                    // 生成base64图片数据
                    var dataUrl = canvas.toDataURL();  //指定格式，也可不带参数
                }
            });
        });

生成的dataUrl就是base64图片数据，接下来就是要通过图片生产pdf了。

生产pdf有两种方法

1.把生成的图片传到后台，使用java把图片转换成pdf

前端代码：

 $("#printScreen").click(function () {//截图,某一个标签，要是想全屏的话就直接把"document.querySelector("#div")"替换成"document.body"
            html2canvas(document.querySelector("#div"), { //截图对象
                //此处可配置详细参数
                onrendered: function(canvas) { //渲染完成回调canvas
                    canvas.id = "mycanvas";
                    // 生成base64图片数据
                    var dataUrl = canvas.toDataURL();  //指定格式，也可不带参数
                    var formData = new FormData(); //模拟表单对象
                    formData.append("file", convertBase64UrlToBlob(dataUrl), "a.png"); //写入数据
                    var xhr = new XMLHttpRequest(); //数据传输方法
                    xhr.open("POST", "/fileupload"); //配置传输方式及地址
                    xhr.send(formData);//发送
                }
            });
        });    //将以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'});
    }

后端接收的代码（就和普通文件上传一样）：文件上传下载

把图片上传上去之后把图片格式转成pdf格式，这里需要用到包iText-1.3.jar

转化的代码：

 String filePath =  "d:"+File.separator+ "temp" + File.separator + "aa.png";
        String pdfPath = "d:"+File.separator+ "temp" + File.separator + "aa.pdf";
        BufferedImage img = ImageIO.read(new File(filePath));
        FileOutputStream fos = new FileOutputStream(pdfPath);
        Document doc = new Document(null, 0, 0, 0, 0);
        doc.setPageSize(new Rectangle(img.getWidth(), img.getHeight()));
        Image image = Image.getInstance(filePath);
        PdfWriter.getInstance(doc, fos);
        doc.open();
        doc.add(image);
        doc.close();

2.直接前端就转换成pdf文件，使用js插件jsPdf.debug.js

结合html2canvas.js插件使用，代码如下：

$("#printScreenAndGetPdf").click(function () {//截图
            html2canvas(document.querySelector("#div"), { //截图对象
                //此处可配置详细参数
                onrendered: function(canvas) { //渲染完成回调canvas
                    canvas.id = "mycanvas";
                    // 生成base64图片数据
                    var dataUrl = canvas.toDataURL();  //指定格式，也可不带参数
                    // 三个参数，第一个方向，第二个单位，第三个尺寸格式(转化成pdf对象)
                    var doc = new jsPDF('landscape','pt',[300, 100]);
                    doc.addImage(dataUrl, 'PNG', 0, 0, 300, 100);
                    doc.save('aa.pdf');//生产pdf文件
                }
            });
        });

前端打印的代码：
$("#print").click(function () {//打印，某一个标签 
    document.body.innerHTML=document.getElementById('div').innerHTML;//把这句去掉就是打印这个页面
    window.print();
});