将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的实现方法(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 纯js实现html转pdf的简单实例(推荐)

    项目开发中遇到了一个变态需求,需要把一整个页面导出为pdf格式,而且要保留页面上的所有的表格.svg图片和样式. 简而言之,就是希望像截图一样,把整个页面截下来,然后保存成pdf. 咋不上天呢-- 查了一下,能够实现html转pdf的方法还是挺多的,大概有以下几种: 1.大部分浏览器就有这个功能.然而我们客户要的可不是这个,人家要的是能够在系统中主动触发的导出为pdf功能,所以这种方案pass. 2.利用第三方工具.我找到了一种利用wkhtmltopdf这种工具来导出的方案,自己在我们的项目中试

  • jsPDF导出pdf示例

    jsPDF貌似不支持中文 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en&q

  • Java实现Html转Pdf的方法

    本文实例讲述了Java实现Html转Pdf的方法.分享给大家供大家参考.具体如下: package test; import java.io.File; import java.io.FileOutputStream; import java.io.OutputStream; import org.xhtmlrenderer.pdf.ITextFontResolver; import org.xhtmlrenderer.pdf.ITextRenderer; import com.lowagie.

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

    需求是一个导出pdf的功能,多方奔走终于实现了,走了不少弯路,而且怀疑现在这个方法仍是弯的. 有个jsPDF 插件可以在前端直接生成pdf,很简便,但不支持IE. 前端: 首先引入  html2canvas.js html2canvas(document.body, { //截图对象 //此处可配置详细参数 onrendered: function(canvas) { //渲染完成回调canvas canvas.id = "mycanvas"; // 生成base64图片数据 var

  • jsPDF生成pdf后在网页展示实例

    复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <title>jsPDF</title> <script type="text/javascript" src="jspdf.js"></script> <s

  • 解决linux下zip文件解压乱码问题

    原因 由于zip格式并没有指定编码格式,Windows下生成的zip文件中的编码是GBK/GB2312等,因此,导致这些zip文件在Linux下解压时出现乱码问题,因为Linux下的默认编码是UTF8. 解决方案一 使用7z解压. 安装p7zip和convmv # fedora $ su -c 'yum install p7zip convmv' # ubuntu $ sudo apt-get install p7zip convmv 执行一下命令解压缩 # 使用7z解压缩 $ LANG=C 7

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

    需求是一个导出pdf的功能,多方奔走终于实现了,走了不少弯路,而且怀疑现在这个方法仍是弯的. 有个jsPDF 插件可以在前端直接生成pdf,很简便,但不支持IE. 前端: 首先引入  html2canvas.js html2canvas(document.body, { //截图对象 //此处可配置详细参数 onrendered: function(canvas) { //渲染完成回调canvas canvas.id = "mycanvas"; // 生成base64图片数据 var

  • javascript判断图片是否加载完成的方法推荐

    load事件 <script type="text/javascript"> $('img').onload = function() { //code } </script> 优点:简单易用,不影响HTML代码. 缺点:只能指定一个元素,javascipt代码必须置于图片元素的下方 jquery方法 <script type="text/javascript"> $(function(){ $('.pic1').each(fun

  • Java将图片组合成PDF文件的方法

    本文实例为大家分享了Java将图片组合成PDF文件的具体代码,供大家参考,具体内容如下 程序界面图: 代码清单: package 将图片组合成PDF文件; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.io.File; import java.io.FileFilter; import java.io.FileOutputStream; import java.io.IOE

  • Vue页面生成PDF的最佳方法推荐

    目录 前言 安装依赖 页面转图片 图片转PDF A4打印适配 总结 前言 最近项目有个需求,将系统统计的数据生成分析报告,然后可以导出成PDF. 这种方法可以有两种,一种是直接调用打印,用户通过浏览器提供的打印页面手动选择导出PDF.当然这种方式兼容性差,且体验不好,显然不是我们想要的效果. 那么第二种方法的实现思路是什么呢? 首先生成报告页面,也就是常规页面: 然后将页面转换成图片( 用到的组件 html2canvas ): 最后将图片导出成PDF( 用到的组件 jspdf ). 安装依赖 n

  • php技术实现加载字体并保存成图片

    下面通过一段代码给大家详解介绍下php技术实现加载字体并保存成图片. // Set the content-type header("Content-type: image/png"); // Create the image $im = imagecreatetruecolor(400, 100); // Create some colors $white = imagecolorallocate($im, 255, 255, 255); $grey = imagecolorallo

  • C#实现将网页保存成图片的网页拍照功能

    本文实例主要实现了网页照相机程序的功能.C#实现将网页保存成图片格式,简单实现网页拍照,主要是基于ActiveX 组件的网页快照类,AcitveX 必须实现 IViewObject 接口.因此读者完全可扩展此类将其用于你的C#软件项目中.在此特别感谢作者:随飞提供的代码. 主要功能代码如下: using System; using System.Collections.Generic; using System.Text; using System.Runtime.InteropServices

  • django将网络中的图片,保存成model中的ImageField的实例

    有这样的情形,django个人头像在model中是: class UserProfile(AbstractUser): """ 用户 """ name = models.CharField(max_length=30, null=True, blank=True, verbose_name="姓名") image = models.ImageField(max_length=1000,upload_to='avatar/%Y/

  • python使用openCV遍历文件夹里所有视频文件并保存成图片

    如果你在文件夹里有很多视频,并且文件夹里还有文件夹,文件夹里的文件夹也有视频,怎么能逐个读取并且保存..所以我写了个代码用了os,walk,这个可以遍历所有文件夹里的文件和文件夹 import os import cv2 cut_frame = 250 # 多少帧截一次,自己设置就行 save_path = "C:\文献与资料\手持红外\图片" for root, dirs, files in os.walk(r"C:\文献与资料\手持红外"): # 这里就填文件夹

  • Python+SeaTable实现生成条形码图片并写入表格

    目录 在 SeaTable 中用 Python 生成条形码 新建 Python 脚本 写入代码 运行脚本 设置条码参考 应用场景 打印条形码用于粘贴答题卡 设计准考证页面用于识别信息 总结 不管是录入信息时需要用扫码器扫码录入.核对信息时用于扫码识别,还是有别的生成条形码的需要,那我们如何把表格中的数字.文本列快速生成条形码图片呢?这在 SeaTable 表格中用 Python 脚本就可以轻松实现,即把表格中的某一个字段,如身份证号.电话号转换成相应的条形码,并存储到图片列中.例如,你有如下一张

  • php实现将HTML页面转换成word并且保存的方法

    本文实例讲述了php实现将HTML页面转换成word并且保存的方法.分享给大家供大家参考,具体如下: 这里用使用到一个PHP的工具叫:PHPWord. 生成Word的原理是,将堆规定好了的xml压缩成一个zip包,并且把后缀名改成doc或者docx即可. 所以使用PHPWord,需要你的PHP环境安装zip.dll压缩扩展,我写了一个demo. 功能说明: 20150507 - HTML中的<p>标签和<ol>列表标签的获取 20150508 - 新增获取文章中的图片功能 2015

随机推荐