JavaScript+Java实现HTML页面转为PDF文件保存的方法


Posted in Javascript onMay 30, 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)); //写入数据
       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包(官方下载地址:https://sourceforge.net/projects/itext/)

@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"高级"特性。

Javascript 相关文章推荐
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Jul 21 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
Apr 12 Javascript
基于jQuery实现网页打印功能
Dec 01 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
Dec 02 Javascript
localStorage的黑科技-js和css缓存机制
Feb 06 Javascript
JS实现图片预览的两种方式
Jun 27 Javascript
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
简单明了区分escape、encodeURI和encodeURIComponent
May 26 Javascript
vue两个组件间值的传递或修改方式
Jul 04 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
Aug 08 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
Aug 14 Javascript
Vue项目中使用flow做类型检测的方法
Mar 18 Javascript
详解JavaScript中双等号引起的隐性类型转换
May 30 #Javascript
JavaScript中的操作符类型转换示例总结
May 30 #Javascript
jQuery中的通配符选择器使用总结
May 30 #Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
May 30 #Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
May 30 #Javascript
使用jQuery判断浏览器滚动条位置的方法
May 30 #Javascript
JS检测移动端横竖屏的代码
May 30 #Javascript
You might like
重料打造自己的“宝马”---第三代
2021/03/02 无线电
终于听上了直流胆调频
2021/03/02 无线电
php和jquery实现地图区域数据统计展示数据示例
2014/02/12 PHP
php自动识别文件编码并转换为UTF-8的方法
2014/06/12 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
laravel框架上传图片实现实时预览功能
2019/10/14 PHP
filemanage功能中用到的lib.js
2007/04/08 Javascript
js身份证验证超强脚本
2008/10/26 Javascript
JavaScript中的细节分析
2012/06/30 Javascript
判断某个字符在一个字符串中是否存在的js代码
2014/02/28 Javascript
Jquery中find与each方法用法实例
2015/02/04 Javascript
Javascript removeChild()删除节点及删除子节点的方法
2015/12/27 Javascript
JS继承与闭包及JS实现继承的三种方式
2017/10/15 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
2017/11/22 Javascript
利用node实现一个批量重命名文件的函数
2017/12/21 Javascript
vux uploader 图片上传组件的安装使用方法
2018/05/15 Javascript
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
React性能优化系列之减少props改变的实现方法
2019/01/17 Javascript
vue 项目 iOS WKWebView 加载
2019/04/17 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
2019/09/16 Javascript
讲解python参数和作用域的使用
2013/11/01 Python
Python的ORM框架SQLAlchemy入门教程
2014/04/28 Python
python 使用turtule绘制递归图形(螺旋、二叉树、谢尔宾斯基三角形)
2019/05/30 Python
如何安装2019Pycharm最新版本(详细教程)
2019/09/26 Python
python库skimage给灰度图像染色的方法示例
2020/04/27 Python
利用CSS3实现的文字定时向上滚动
2016/08/29 HTML / CSS
关于css中margin的值和垂直外边距重叠问题
2020/10/27 HTML / CSS
教育实习生的自我评价分享
2013/11/21 职场文书
电焊工岗位职责
2014/03/06 职场文书
企业形象策划方案
2014/05/29 职场文书
校园环保广播稿(3篇)
2014/09/15 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
Idea连接MySQL数据库出现中文乱码的问题
2021/04/14 MySQL
pytorch中的model.eval()和BN层的使用
2021/05/22 Python
聊聊SpringBoot自动装配的魔力
2021/11/17 Java/Android
利用Python实现Picgo图床工具
2021/11/23 Python