请选择 进入手机版 | 继续访问电脑版

猫先森网络资源站

 找回密码
 立即注册
查看: 99|回复: 25

[HTML/Xhtml] html转pdf截图保存功能的实现

[复制链接]
等级头衔

等級:论坛元老

Rank: 8Rank: 8

积分成就
积分
2956
金钱
45
人气
45
贡献
2911
主题
2911
精华
0
猫币
0
违规
0
注册时间
2021-1-14
最后登录
2021-1-14

快捷版块
版块
网站源码
版块
游戏源码
版块
商业源码
版块
SEO新闻
版块
SEO教程
版块
SEO程序
功能
猫币提现

发表于 2020-12-22 15:26:34 | 显示全部楼层 |阅读模式
这篇文章主要介绍了html转pdf截图保存功能的实现,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
                        
                           
                           
                        
                        
                            使用技术
itext.jar : 将byte文件输入流转换为图片,pdf等
html2canvas.js :将html页面区域截图为base64编码的图片资源
java+js
1. 准备资源
itext.jar
www.baidu.com
html2canvas.js
www.baidu.com
2.前端代码:

//进行截图操作,document.querySelector("body") 为要截图的区域
     function test() {
            html2canvas(document.querySelector("body"), {
                onrendered: function (canvas) {
                    var dataUrl = canvas.toDataURL('image/png');
                    var formData = new FormData(); //模拟表单对象
                    formData.append("imgData", convertBase64UrlToBlob(dataUrl)); //写入数据
                    var xhr = new XMLHttpRequest(); //数据传输方法
                    xhr.open("POST", "http://localhost:8080/pdf"); //配置传输方式及地址
                    xhr.send(formData);
                    xhr.onreadystatechange = function () { //回调函数
                    };
                }
            });
        }
        //格式化图片base64编码转换为byte文件流
        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 s = 0;s//调用截图方法即可
3.后端代码:

@RequestMapping(value = "/pdf",method = RequestMethod.POST)
    public void test(MultipartHttpServletRequest request, HttpServletResponse response) throws IOException {
        String filePath = "D:\\blog\\exportPdf2.pdf";
        String imagePath = "D:\\blog\\exportImg2.png";
        Document document = new Document();
        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();
            PdfWriter.getInstance(document, new FileOutputStream(filePath)); //itextpdf文件
            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.scalePercent(percent+3);
            document.add(image);
            document.close();
        }catch (DocumentException de) {
            System.err.println(de.getMessage());
        }
        catch (Exception e) {
            e.printStackTrace();
        }
    }
    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;
    }
4 包名

import com.itextpdf.text.Document;
import com.itextpdf.text.DocumentException;
import com.itextpdf.text.Image;
import com.itextpdf.text.Paragraph;
import com.itextpdf.text.pdf.PdfWriter;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.stereotype.Controller;
import org.springframework.util.FileCopyUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import javax.imageio.stream.FileImageOutputStream;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.Map;
4 前端截图,访问后端接口,保存截图文件到本地为pdf或者其他格式的文件。
有兴趣的同学可以把后端改为下载文件到本地
5 项目源码地址
https://github.com/zhangjy520/learn_java/tree/master/boot
到此这篇关于html转pdf截图保存功能的实现的文章就介绍到这了,更多相关html转pdf截图保存内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

回复

使用道具 举报

等级头衔

等級:新手上路

Rank: 1

积分成就
积分
2
金钱
0
人气
0
贡献
1
主题
1
精华
0
猫币
1
违规
0
注册时间
2021-1-14
最后登录
2021-1-14

快捷版块
版块
网站源码
版块
游戏源码
版块
商业源码
版块
SEO新闻
版块
SEO教程
版块
SEO程序
功能
猫币提现

发表于 2021-3-24 19:58:55 | 显示全部楼层
青春不在了,青春痘还在!

回复

使用道具 举报

等级头衔

等級:新手上路

Rank: 1

积分成就
积分
0
金钱
0
人气
0
贡献
0
主题
0
精华
0
猫币
0
违规
0
注册时间
2021-1-14
最后登录
2021-1-14

快捷版块
版块
网站源码
版块
游戏源码
版块
商业源码
版块
SEO新闻
版块
SEO教程
版块
SEO程序
功能
猫币提现

发表于 2021-3-26 03:54:49 | 显示全部楼层
缺乏激情了!

回复

使用道具 举报

等级头衔

等級:新手上路

Rank: 1

积分成就
积分
0
金钱
0
人气
0
贡献
0
主题
0
精华
0
猫币
0
违规
0
注册时间
2021-1-14
最后登录
2021-1-14

快捷版块
版块
网站源码
版块
游戏源码
版块
商业源码
版块
SEO新闻
版块
SEO教程
版块
SEO程序
功能
猫币提现

发表于 2021-3-26 04:33:24 | 显示全部楼层
脚本之家楼主发几张靓照啊!

回复

使用道具 举报

等级头衔

等級:新手上路

Rank: 1

积分成就
积分
0
金钱
0
人气
0
贡献
0
主题
0
精华
0
猫币
0
违规
0
注册时间
2021-1-14
最后登录
2021-1-14

快捷版块
版块
网站源码
版块
游戏源码
版块
商业源码
版块
SEO新闻
版块
SEO教程
版块
SEO程序
功能
猫币提现

发表于 2021-3-27 13:21:54 | 显示全部楼层
雷锋做好事不留名,都写在帖子里!

回复

使用道具 举报

等级头衔

等級:新手上路

Rank: 1

积分成就
积分
0
金钱
0
人气
0
贡献
0
主题
0
精华
0
猫币
0
违规
0
注册时间
2021-1-14
最后登录
2021-1-14

快捷版块
版块
网站源码
版块
游戏源码
版块
商业源码
版块
SEO新闻
版块
SEO教程
版块
SEO程序
功能
猫币提现

发表于 2021-3-27 13:21:58 | 显示全部楼层
脚本之家楼主很有艺术范!

回复

使用道具 举报

等级头衔

等級:新手上路

Rank: 1

积分成就
积分
0
金钱
0
人气
0
贡献
0
主题
0
精华
0
猫币
0
违规
0
注册时间
2021-1-14
最后登录
2021-1-14

快捷版块
版块
网站源码
版块
游戏源码
版块
商业源码
版块
SEO新闻
版块
SEO教程
版块
SEO程序
功能
猫币提现

发表于 2021-3-28 01:41:32 | 显示全部楼层
好东西,赞一个!

回复

使用道具 举报

等级头衔

等級:新手上路

Rank: 1

积分成就
积分
0
金钱
1
人气
0
贡献
0
主题
0
精华
0
猫币
0
违规
0
注册时间
2021-1-14
最后登录
2021-4-13

快捷版块
版块
网站源码
版块
游戏源码
版块
商业源码
版块
SEO新闻
版块
SEO教程
版块
SEO程序
功能
猫币提现

发表于 2021-3-28 11:43:45 | 显示全部楼层
我对脚本之家楼主的敬仰犹如滔滔江水绵延不绝!

回复

使用道具 举报

等级头衔

等級:新手上路

Rank: 1

积分成就
积分
0
金钱
0
人气
0
贡献
0
主题
0
精华
0
猫币
0
违规
0
注册时间
2021-1-14
最后登录
2021-1-14

快捷版块
版块
网站源码
版块
游戏源码
版块
商业源码
版块
SEO新闻
版块
SEO教程
版块
SEO程序
功能
猫币提现

发表于 2021-3-30 11:26:35 | 显示全部楼层
脚本之家楼主,您忘记吃药了吧?

回复

使用道具 举报

等级头衔

等級:新手上路

Rank: 1

积分成就
积分
0
金钱
0
人气
0
贡献
0
主题
0
精华
0
猫币
0
违规
0
注册时间
2021-1-14
最后登录
2021-1-14

快捷版块
版块
网站源码
版块
游戏源码
版块
商业源码
版块
SEO新闻
版块
SEO教程
版块
SEO程序
功能
猫币提现

发表于 2021-3-31 08:42:40 | 显示全部楼层
以后就跟脚本之家楼主混了!

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表