您现在的位置是:网站首页> 编程资料编程资料
html转pdf截图保存功能的实现极强PDF转换器如何将ppt转换成html网页格式html转换为pdf案例的一些总结(多图推荐)
2023-10-08
367人已围观
简介 这篇文章主要介绍了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截图保存内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
相关内容
- 浅谈HTML文件引入外部CSS文件时路径的写法总结CSS与JS中的相对路径引用简单介绍完美解决调用上级目录中的css样式文件的路径问题css里面图片路径问题(同包/不同包)探讨css中url的路径含义及使用css中url的路径含义
- HTML外部样式表如何引入CSS样式详解CSS3.0(Cascading Style Sheet) 层叠级联样式表FrontPage怎么自定义设置CSS外部样式表?如何只在IE上加载CSS样式表CSS(Cascading Style Sheet)级联样式表常用术语总结
- HTML表格跨行跨列操作(rowspan、colspan)HTML表格标记教程(34):跨行属性ROWSPANHTML表格标记教程(35):跨列属性COLSPAN
- 纯html+css实现Element loading效果CSS loading效果之 吃豆人的实现css3 中实现炫酷的loading效果 基于CSS3实现的几个小loading效果 CSS3实现10种Loading效果 使用CSS时间打点的Loading效果的教程css实现叶子形状loading效果
- html中使用vue-router的示例代码纯html+css实现Element loading效果纯html+css实现奥运五环的示例代码HTML+CSS实现导航条下拉菜单的示例代码html+css实现滚动到元素位置显示加载动画效果纯html+css实现打字效果html+css实现环绕倒影加载特效html输入两个数实现加减乘除功能html中显示特殊符号(附带特殊字符对应表)关于html选择框创建占位符的问题html css3不拉伸图片显示效果
- 前端页面弹框遮罩禁止页面滚动CSS设计之页面滚动条出现时防止页面跳动的方法使用overflow: hidden来禁用页面滚动条纯css 实现footer 一直在页面底部,不随页面滚动HTML页面滚动时部分内容位置固定不滚动的实现
- 纯html+css实现奥运五环的示例代码HTML+CSS实现导航条下拉菜单的示例代码html+css实现滚动到元素位置显示加载动画效果纯html+css实现打字效果html+css实现环绕倒影加载特效html css3不拉伸图片显示效果HTML+CSS 实现顶部导航栏菜单制作使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
- HTML+CSS实现导航条下拉菜单的示例代码HTML+CSS 实现顶部导航栏菜单制作Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码CSS导航条菜单之带小三角形的实现代码css制作黑色经典导航下拉菜单基于CSS3制作立体效果导航菜单纯CSS实现的三级导航菜单效果代码
- 纯html+css实现打字效果html css3不拉伸图片显示效果利用html+css实现菜单栏缓慢下拉效果的示例代码使用HTML和CSS实现的标签云效果(附demo)html+css+js实现导航栏滚动渐变效果 html+css实现响应式卡片悬停效果CSS3+HTML5+JS 实现一个块的收缩与展开动画效果HTML+CSS+JS模仿win10亮度调节效果的示例代码css+html实现Skeleton Screen 加载占位图动画效果(带动画)
- NBA 2K14投篮动作解析及怎么提高投篮命中率的经验心得_手机游戏_游戏攻略_
