将html页面保存成图片,图片写入pdf的实现方法(推荐)


Posted in Javascript onSeptember 17, 2016

需求是一个导出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的实现方法(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用jscript实现二进制读写脚本代码
Jun 09 Javascript
基于jquery实现的可以编辑选择的下拉框的代码
Nov 19 Javascript
AngularJS基础 ng-options 指令详解
Aug 02 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
vue初始化动画加载的实例
Sep 01 Javascript
浅谈从React渲染流程分析Diff算法
Sep 08 Javascript
vue实现简单的日历效果
Sep 24 Javascript
IE11下处理Promise及Vue的单项数据流问题
Jul 24 Javascript
微信小程序动态设置图片大小的方法
Nov 21 Javascript
微信小程序实现二维码签到考勤系统
Jan 16 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
Mar 17 Javascript
jquery遍历标签中自定义的属性方法
Sep 17 #Javascript
jquery属性,遍历,HTML操作方法详解
Sep 17 #Javascript
详解Angular2中的编程对象Observable
Sep 17 #Javascript
详细总结Javascript中的焦点管理
Sep 17 #Javascript
js变量提升深入理解
Sep 16 #Javascript
再谈javascript常见错误及解决方法
Sep 16 #Javascript
使用JQuery中的trim()方法去掉前后空格
Sep 16 #Javascript
You might like
自己写的php curl库实现整站克隆功能
2015/02/12 PHP
JS 学习笔记 防止发生命名冲突
2009/07/30 Javascript
IE6图片加载的一个BUG解决方法
2010/07/13 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
2015/08/10 Javascript
angularjs的select使用及默认选中设置
2017/04/08 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
2017/06/11 Javascript
Vue实现路由跳转和嵌套
2017/06/20 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
2017/08/18 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
2017/09/19 Javascript
vue微信分享到朋友圈 vue微信发送给好友
2018/11/28 Javascript
解决node-sass偶尔安装失败的方法小结
2018/12/05 Javascript
Vue extend的基本用法(实例详解)
2019/12/09 Javascript
JS面向对象编程实现的拖拽功能案例详解
2020/03/03 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
2020/11/09 Javascript
Vue开发中常见的套路和技巧总结
2020/11/24 Vue.js
python利用装饰器进行运算的实例分析
2015/08/04 Python
使用Python微信库itchat获得好友和群组已撤回的消息
2018/06/24 Python
python3实现字符串的全排列的方法(无重复字符)
2018/07/07 Python
python flask实现分页的示例代码
2018/08/02 Python
python执行CMD指令,并获取返回的方法
2018/12/19 Python
解决python测试opencv时imread导致的错误问题
2019/01/26 Python
详解python配置虚拟环境
2019/04/08 Python
python实现给微信指定好友定时发送消息
2019/04/29 Python
python调用其他文件函数或类的示例
2019/07/16 Python
python的pstuil模块使用方法总结
2019/07/26 Python
Python新手如何进行闭包时绑定变量操作
2020/05/29 Python
python给list排序的简单方法
2020/12/10 Python
澳大利亚当地社区首选的光学商店:1001 Optical
2019/08/24 全球购物
美国最大的烧烤架和户外生活用品专业零售商:Barbeques Galore
2021/01/09 全球购物
《长征》教学反思
2014/04/27 职场文书
2015年计划生育协会工作总结
2015/05/13 职场文书
2015年妇幼卫生工作总结
2015/05/23 职场文书
创业计划书之孕婴生活馆
2019/11/11 职场文书
详解CocosCreator消息分发机制
2021/04/16 Javascript
解决Golang中ResponseWriter的一个坑
2021/04/27 Golang
Java基于字符界面的简易收银台
2021/06/26 Java/Android