在许多生成报表的时候需要我们后台作出动态的数据，并渲染到前端生成pdf格式，Excel格式的各种报表，但是浏览器自带的生成pdf功能，windows系统的ctrl+p键就能完全搞定这一需求，但对客户来说，这种体验极差，肯定是不行的，有好几种方法将html生成pdf格式，每一种方法都有自己的优缺点，

先简单谈一谈第一种比较简单的jsPDF，代码完全有javascript就够了，不需要后台，但是不管哪一种都需要页面前端代码写的表准规范，不那么乱套就行，

jsPDF：直接上代码：

<!DOCTYPE html>

<html>

<head>

	<title>jsPDF</title>

	<meta charset="utf-8">

    <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>

    <script src="https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js"></script>

	<script type="text/javascript">

	function htmltopdf() {

        var target = document.getElementsByClassName("report")[0];

        target.style.background = "#ffffff";

         html2canvas(target, {

         onrendered:function(canvas) {

        var contentWidth = canvas.width;

        var contentHeight = canvas.height;

        //一页pdf显示html页面生成的canvas高度;

        var pageHeight = contentWidth / 592.28 * 841.89;

        //未生成pdf的html页面高度

        var leftHeight = contentHeight;

        //页面偏移

        var position = 0;

        //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高

        var imgWidth = 570.28;

        var imgHeight = 592.28/contentWidth * contentHeight;

        var pageData = canvas.toDataURL('image/jpeg', 1.0);

        var pdf = new jsPDF('', 'pt', 'a4');

        //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)

        //当内容未超过pdf一页显示的范围，无需分页

        if (leftHeight < pageHeight) {

        pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight );

        } else {

            while(leftHeight > 0) {

                pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)

                leftHeight -= pageHeight;

                position -= 841.89;

                //避免添加空白页

                if(leftHeight > 0) {

                  pdf.addPage();

                }

            }

        }

        pdf.save("test.pdf");

    }

  })

}

</script>

<style type="text/css">

	.report{width: 80%;height: 500px;margin: auto;}

</style>

</head>

<body>

<div class="report">

	<h2>jspdf生成PDF</h2>

	<button onclick="htmltopdf()">点击生成pdf</button>

	<table border="1" cellspacing="0">

<thead>

<tr>

  <th align="center">调研对象</th>

  <th align="center">优点</th>

  <th align="center">缺点</th>

  <th align="center">分页</th>

  <th align="center">图片</th>

  <th align="center">表格</th>

  <th align="center">链接</th>

  <th align="center">中文</th>

  <th align="center">特殊字符、样式</th>

  <th align="center">导出样例</th>

  <th align="center">备注</th>

</tr>

</thead>

<tbody><tr>

  <td align="center">jsPDF</td>

  <td align="center">1、整个过程在客户端执行(不需要服务器参与)，调用简单</td>

  <td align="center">1、生成的pdf为图片形式，且内容失真</td>

  <td align="center">支持</td>

  <td align="center">支持</td>

  <td align="center">支持</td>

  <td align="center">不支持</td>

  <td align="center">支持</td>

  <td align="center">支持</td>

  <td align="center"></td>

  <td align="center"></td>

</tr>

<tr>

  <td align="center">iText</td>

  <td align="center">1、功能基本可以实现，比较灵活2、生成pdf质量较高</td>

  <td align="center">1、对html标签严；格，少一个结束标签就会报错；2、后端实现复杂，服务器需要安装字体；3、图片渲染比较复杂(暂时还没解决)</td>

  <td align="center">支持</td>

  <td align="center">支持</td>

  <td align="center">支持</td>

  <td align="center">支持</td>

  <td align="center">支持</td>

  <td align="center">支持</td>

  <td align="center"></td>

  <td align="center"></td>

</tr>

<tr>

  <td align="center">wkhtmltopdf</td>

  <td align="center">1、调用方式简单(只需执行一行脚本)；2、生成pdf质量较高</td>

  <td align="center">1、服务器需要安装wkhtmltopdf环境；2、根据网址生成pdf，对于有权限控制的页面需要在拦截器进行处理</td>

  <td align="center">支持</td>

  <td align="center">支持</td>

  <td align="center">支持</td>

  <td align="center">支持</td>

  <td align="center">支持</td>

  <td align="center">支持</td>

  <td align="center"></td>

  <td align="center"></td>

</tr>

</tbody></table>

</div>

</body>

</html>

　网页呈现下面样式：

点击按钮执行js生成：

但这种方式有很大的缺点，分页时会出现比较大的瑕疵，整体像素低，看起来不是特别的清晰

整体来说是截取的部分html代码，下图获取元素为要截取的div,必须与后边保持一致，此外还需外部导入js，这种方式使用canvas相当于将html页面截屏保存成图片放入pdf当中，谨慎使用。

下篇继续写wkhtmltopdf吧

html/jsp导出pdf格式的几种方法（jsPDF，iText，wkhtmltopdf）的更多相关文章

  1. JSP页面导出PDF格式文件

    JSP页面导出PDF格式文件基本在前端页面可以全部完成 <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/ ...

  2. Java导出Pdf格式表单

    前言   作为开发人员,工作中难免会遇到复杂表单的导出,接下来介绍一种通过Java利用模板便捷导出Pdf表单的方式 模拟需求   需求:按照下面格式导出pdf格式的学生成绩单 准备工作 Excel软件 ...

  3. confluence导出PDF格式文件不显示中文解决

    由于confluence导出PDF格式文件需要应用字体文件,下载字体文件在confluence管理员界面安装即可. 我这里使用从simhei.ttf楷体,可以从windowns主机里下载(c:/win ...

  4. AE 将地图导出为图片的两种方法

    在ArcGIS的开发中,我们经常需要将当前地图打印(或是转出)到图片文件中.将Map或Layout中的图象转出有两种方法,一种为通过IActiveView的OutPut函数,另外一种是通过IExpor ...

  5. delphi 导出到excel的7种方法

    本文来自 爱好者8888 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/kpc2000/article/details/17066823?utm_source=cop ...

  6. web导出excel文件的几种方法

    总的来说,两种方法:服务器端生成和浏览器端生成. 服务器端生成就是:根据用户请求,获取相应的数据,使用poi/jxl, jacob/jawin+excel,或是用数据拼html的table或是cvs纯 ...

  7. java将doc文件转换为pdf文件的三种方法

    http://feifei.im/archives/93 —————————————————————————————————————————————— 项目要用到doc转pdf的功能,一番google ...

  8. .NET CORE 2.1 导出excel文件的两种方法

    最近在做 MVC 项目的时候遇到项目的导出,下面总结下两种导出到excel 的方法 第一种方法: 将文件写到本地,然后返回这个File 或者返回这个 File 的绝对地址  其中  _hostingE ...

  9. Java导出Excel文件的两种方法

    将数据以Excel表格的形式导出:首先下载poi的jar包,导入项目中,或者使用maven仓库管理,在pom文件添加:<dependency>    <groupId>org. ...

随机推荐

  1. android SDK模拟器环境搭建

    一.下载安装android SDK 两种方式: (1)官网下载(需FQ):https://developer.android.com/studio/index.html (2)无需FQ下载:http: ...

  2. springboot ****使用经验*******

    目录 1. 返回时间格式化问题 2. springboot 中获取属性 3. SpringBoot中启动是忽略某项检测 4.  启动不开启安全校验 一返回时间格式化问题 在Spring Boot项目中 ...

  3. $a=[1,2,3,4,5]; $b=[a,b,c,d,e]; 转成[[1,a],[2,b],[3,c],[4,d],[5,3]]

    $a=[1,2,3,4,5]; $b=[a,b,c,d,e]; 结果 [[1,a],[2,b],[3,c],[4,d],[5,3]] return array_map(function($v1,$v2 ...

  4. django中sqlite迁移mysql

    sqlite数据迁移 1 数据备份 django中打开terminalpython manage.py dumpdata authorization > authorization_data.j ...

  5. java入门写的第一个代码《HelloWorld》

    public class HelloWorld {public static void main(String[] args){System.out.println("HelloWorld! ...

  6. Scapy

    1.UDP scanning with Scapy Scapy is a tool that can be used  to craft and inject custom packets into  ...

  7. sqlalchemy的使用

    from sqlalchemy import Column, Integer, String, Text, ForeignKey, DateTime, UniqueConstraint, Index ...

  8. javascript数组去重 String字符串去掉两端空格 javascript Array二分法排序 比较 javascript 求和

    通过原形添加方法: ==================数组去重(对象去重法)======================= Array.prototype.unique=function(){ va ...

  9. 手机号流量统计---Mapreduce项目分析

    文档显示: 每行依次是 ~手机号~上行流量~下行流量 需求分析: 需要统计各自的手机号,及上行.下行.总流量 具体做法: 1.定义map输入输出类型 通常情况下map的输入的key-value就是lo ...

  10. docker 安装mongo

    1.docker安装参考docker官网教程 2.docker中获取mongo镜像 sudo pull mongo 3.通过run命令新建/启动容器,容器名称为mongo,本地宿主机如果27017端口 ...