html保存当前页面为图片,将html页面保存成图片,图片写入pdf的实现方法(推荐)
需求是一个导出pdf的功能,多方奔走终于实现了,走了不少弯路,而且怀疑现在这个方法仍是弯的。
有个jsPDF 插件可以在前端直接生成pdf,很简便,但不支持IE。
前端:
首先引入 html2canvas.js
html2canvas(document.body, { //截图对象
//此处可配置详细参数
onrendered: function(canvas) { //渲染完成回调canvas
canvas.id = "mycanvas";
// 生成base64图片数据
var dataUrl = canvas.toDataURL('image/png'); //指定格式,也可不带参数
var formData = new FormData(); //模拟表单对象
formData.append("imgData", convertBase64UrlToBlob(dataUrl), "123.png"); //写入数据
var xhr = new XMLHttpRequest(); //数据传输方法
xhr.open("POST", "../bulletin/exportPdf"); //配置传输方式及地址
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});
}
}
}
};
}
});
//将以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'});
}
兼容性:Firefox 3.5+, Chrome, Opera, IE10+
不支持:iframe,浏览器插件,Flash
跨域图片需要在跨域服务器header加上允许跨域请求
access-control-allow-origin: * access-control-allow-credentials: true
svg图片不能直接支持,已经有补丁包了,不过我没有试过。
IE9不支持FormData数据格式,也不支持Blob,这种情况下将canvas生成的64base字符串去掉url头之后直接传给后台,后台接收之后:
String base64 = Img.split(",")[1];
BASE64Decoder decode = new BASE64Decoder();
byte[] imgByte = decode.decodeBuffer(base64);
后端:
导入 itext jar包
@RequestMapping("/exportPdf")
public @ResponseBody void exportPdf(MultipartHttpServletRequest request,HttpServletResponse response)throws ServletException, IOException {
ResultData result = new ResultData(); //自定义结果格式
String filePath = "c:\\exportPdf2.pdf";
String imagePath = "c:\\exportImg2.bmp";
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.setPageSize(PageSize.A2);
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();
result.setSuccess(true);
operatelogService.addOperateLogInfo(request, "导出成功:成功导出简报Pdf");
}catch (DocumentException de) {
System.err.println(de.getMessage());
}
catch (Exception e) {
e.printStackTrace();
result.setSuccess(false);
result.setErrorMessage(e.toString());
try {
operatelogService.addOperateLogError(request, "导出失败:服务器异常");
} catch (Exception e1) {
e1.printStackTrace();
}
}
response.getWriter().print(JSONObject.fromObject(result).toString());
}
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;
}
iText是著名的开放源码的站点sourceforge一个项目,是用于生成PDF文档的一个java类库。
处理速度快,支持很多PDF"高级"特性。
但是itext出错的时候不会报错,直接跳过去,回头看pdf文档损坏,找不到出错原因,真是急死人。
最后感谢网络上有关的博文和贴子以及百度搜索。
以上这篇将html页面保存成图片,图片写入pdf的实现方法(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程圈。
html保存当前页面为图片,将html页面保存成图片,图片写入pdf的实现方法(推荐)相关推荐
- Java操作长方形图片补全不失真成正方形图片
Java操作长方形图片补全不失真成正方形图片 BufferedImage image = ImageIO.read(new FileInputStream(new File("C:\\Use ...
- python与html交互实现图片上传_python 实现上传图片并预览的3种方法(推荐)
在常见的用户注册页面,需要用户在本地选择一张图片作为头像,并同时预览. 常见的思路有两种:一是将图片上传至服务器的临时文件夹中,并返回该图片的url,然后渲染在html页面:另一种思路是,直接在本地内 ...
- java 将一张图片切割成n个小图片,任意切割一张图片成新图片
根据图片的选中左上角度坐标和宽高来截取生成新的图片.测试通过,并已在项目中运用.但是不能切割动态的gif图片.有点遗憾,待优化. ---注:main方法调试代码记得修改图片路径 package com ...
- 图片上传并转成灰白图片
这是以前做webim时写的上传用户头像时要生成离线状态的图片,即黑白图片的代码 函数代码如下: Code public void MakeSmallImg(string fileName, strin ...
- html背景自动换,html页面换皮肤颜色、背景图片(更换页面背景,常驻缓存)刷新保存...
利用样式文件,使网页能够更换不同的主题风格,这个只是简单的小列子,更换了背景图,和字体颜色,更换主题的基本原理是这样的.通过更改,link标签里的href属性,加载不同的样式文件.这里还用到了一款JQ ...
- vue 签署文件两张图合并成一张图 h5页面转换成图片并长按保存在本地
在做让用户在页面签名并把当前页面保存为图片,附上完整代码 (直接复制代码,更改接口地址或删除接口逻辑可直接复用) **准备工作:安装 npm install vue-esign --save 全局 ...
- 页面绘制 canvas 并转换成图片实现长按保存
前言 基于 uni-app 进行m端 app 开发的时候,碰上一个需求是将卡片弹窗生成图片,之前工作有用过 html2image 等插件,虽然简单便捷,但是经常会碰见一些奇奇怪怪的兼容性问题,因此此次 ...
- python网页保存为图片_使用Python保存网页上的图片或者保存页面为截图
Python保存网页图片这个是个比较简单的例子,网页中的图片地址都是使用'http://.....jpg'这种方式直接定义的. 使用前,可以先建立好一个文件夹用于保存图片,本例子中使用的文件夹是 d: ...
- python将网页保存为图片_使用Python保存网页上的图片或者保存页面为截图
# -*- coding: UTF-8 -*- import os,re,urllib,uuid #首先定义云端的网页,以及本地保存的文件夹地址 urlPath='http://gamebar.com ...
最新文章
- JsonHelper
- MBA必读:不能触碰的5大职场高压线
- asyn4j -- java 异步方法调用框架
- python123动物重量排序_Python爬虫图片学习(一)
- 社区开源版本,基于Springboot精简了代码,改变为单体,方便大家一键启动
- 经典线程同步 信号量Semaphore
- Java遇见HTML——JSP篇之JSP状态管理
- QQ去除未读状态的动画
- MySql学习笔记【二、库相关操作】
- 固态硬盘简称是不是ssd_小白科普:没想到你是这样的固态硬盘
- 三日济州岛,何以韩国人眼光?-让自己慢下来(43)
- DirectX大作业——3D场景地图
- 2022-2028全球与中国交通信号控制系统市场现状及未来发展趋势
- gulp两种配置方式总结
- 知识产权审理庭解决方案
- 1.3 Codesys十六进制数字字符串与字节互转
- java编程思想初始化引用,JAVA编程思想--第5章 初始化与清理
- (实用)宽带连接错误的处理办法691、623、678、645、720、 721、718、734...
- js 延时执行 比如 sleep(1000) 意味着等待1000毫秒
- html中根号怎么写,HTML特殊符号对应代码
热门文章
- linux下的IO重定向与管道相关的知识简析
- 美国TSCA 法案管控产品中的几种PBT化学品
- 微信朋友圈装x代码_朋友圈生成器有哪些_微信朋友圈生成器大全_微信朋友圈装逼生成器下载_飞翔软件专题...
- odoo14学习速记笔记
- iOS开发支付集成之支付宝支付
- oracle删除违反完整约束条件,ORA-02291: 违反完整约束条件 - 未找到父项关键字
- Prometheus(二)基础概念
- 独家对话AAAI、ACM、ACL三会会士Raymond J. Mooney | 香侬专栏
- 贪心算法--最小耗费生成树(Prim算法)
- SqlException:ConnectionTimeout Expired. The timeout period elapsed during the post-login phase