JS 如何将 HTML 页面导出为 PDF

原创 2017年02月23日 16:39:58

2017年7月21日更新

没想到我为实现自己需求写的Demo受到这么多人关注,私信问的比较多。

在这里向大家道歉了,因为这个Demo是有瑕疵的,比如它不支持多页(我的需求只是一页ε=ε=ε=┏(゜ロ゜;)┛),页面拉伸,模糊等问题

为了避免更多人被我误导,建议大佬们参考以下教程文档:

  • http://rawgit.com/MrRio/jsPDF/master/
    这是官方案例,其中有个 HTMLRender 案例便是导出多页PDF的最简单的方式

    var doc = new jsPDF();
    
    // We'll make our own renderer to skip this editor
    var specialElementHandlers = {
        '#editor': function(element, renderer){
            return true;
        }
    };
    
    // All units are in the set measurement for the document
    // This can be changed to "pt" (points), "mm" (Default), "cm", "in"
    doc.fromHTML($('body').get(0), 15, 15, {
        'width': 170, 
        'elementHandlers': specialElementHandlers
    });
    
  • https://github.com/linwalker/render-html-to-pdf

    这个是结合html2canvas和jspdf导出多页的详细解释demo,写的比我好太多,而且实现逻辑很高明。

下面是我的正文,/(ㄒoㄒ)/~~


好久没在CSDN写博客了,因为都放在了个人网站了哈

我这里有个需求,就是前端添加个按钮,提供HTML页面导出为PDF的功能。

我谷歌了好久(难道是我谷歌的方式不对 (ˉ▽ˉ;)…),找到的答案大都推荐 jsPDF + html2canvas 的方式。

参考了这两个开源项目的文档,自己写,失败,导出的pdf是空的。
参考 stackoverflow 代码,同样失败,同样只导出空白的pdf,他们咋成功了?

好了,以上都是废话,只是说明了我找答案的艰辛之旅。

源码在这里 https://github.com/pwcong/how-transform-html-into-pdf

栗子

准备

创建项目文件夹,npm构建怎样都行,我这里简单直接引入两个库 jspdfhtml2canvas,大家可以自行下载。

新建HTML页面文件

头部引入刚才所下载的 jspdfhtml2canvas,再导入主要的 js 文件例如:

<script src="/js/jspdf.debug.js"></script>
<script src="/js/html2canvas.js"></script>
<script src="/main.js"></script>

页面里面内容自己想怎么写就怎么写啦,提供一个按钮来触发导出pdf的功能,例如:


<button id="btn-html2canvas">export PDF by using jspdf + html2canvas</button>

编辑 main.js

document.getElementById("btn-html2canvas").onclick = function(){

    html2canvas(document.getElementById("content"), {
        onrendered: function(canvas) {

            //通过html2canvas将html渲染成canvas,然后获取图片数据
            var imgData = canvas.toDataURL('image/jpeg');

            //初始化pdf,设置相应格式
            var doc = new jsPDF("p", "mm", "a4");

            //这里设置的是a4纸张尺寸
            doc.addImage(imgData, 'JPEG', 0, 0,210,297);

            //输出保存命名为content的pdf
            doc.save('content.pdf');
        }
    });

}

这里要特别注意 canvas.toDataURL('image/jpeg)的参数 image/jpegdoc.addImage(...,'JPEG',...) 的参数 JPEG务必一致
而且,我也建议这两个参数分别写 image/jpegJPEG
因为其他参数例如 image/png 等,导出pdf后内容为空。
这也是困扰了我一天的问题。(我猜测因为html2canvas输出的图片base64数据是image/jpeg格式,如果写其他格式会导致渲染失败)

添加到服务器中浏览器访问,测试html导出为pdf是否成功,总之博主成功了。

版权声明:本文为博主原创文章,未经博主允许不得转载。

Java实现HTML代码生成PDF文档

1、IText实现html2pdf,速度快,纠错能力差,支持中文(要求HTML使用unicode编码),但中支持一种中文字体,开源。2、Flying Sauser实现html2pdf,纠错能力差,支持...
  • zdtwyjp
  • zdtwyjp
  • 2010年07月27日 16:42
  • 70833

JS 如何将 HTML 页面导出为多页 PDF

前话之前写了一篇博文 JS 如何将 HTML 页面导出为 PDF 。 当时只是自己有个需求,只是导出一页PDF,写个了示例。之后就有同学私信我问我怎么导出多页PDF。好吧,其实这些看文档画画图自己是...
  • pwc1996
  • pwc1996
  • 2017年04月12日 12:01
  • 6492

纯js实现html转pdf

项目开发中遇到了一个变态需求,需要把一整个页面导出为pdf格式,而且要保留页面上的所有的表格、svg图片和样式。 简而言之,就是希望像截图一样,把整个页面截下来,然后保存成pdf。 咋不上天呢……...
  • rvrnld5t
  • rvrnld5t
  • 2017年02月19日 21:48
  • 5419

Web页面生成PDF(html to pdf)

  • 2017年04月17日 17:18
  • 26.47MB
  • 下载

最好用Html转pdf的工具——wkhtmltopdf

最好用,最强大的html转pdf,不需要编写过多的php算法,就可以高清,简单,快捷,方便的将你所需要的页面转成pdf...
  • qq_14873105
  • qq_14873105
  • 2016年05月13日 11:41
  • 30150

Java实现HTML代码生成PDF文档

1、IText实现html2pdf,速度快,纠错能力差,支持中文(要求HTML使用unicode编码),但中支持一种中文字体,开源。   2、Flying Sauser实现html2pdf...
  • qq_26562641
  • qq_26562641
  • 2017年04月20日 16:07
  • 1739

HTML 生成pdf

  • 2015年06月02日 10:21
  • 101KB
  • 下载

Html生成Pdf

  • 2012年12月10日 13:21
  • 3.57MB
  • 下载

用jspdf实现页面下载生成pdf文件

用jspdf实现页面下载生成pdf文件 一路辛酸就不多说了,经历了各种尝试,最后终于搞定,直接贴代码: function pdfCreater(){    html2canvas(docum...
  • w20228396
  • w20228396
  • 2017年02月16日 14:43
  • 2136

js的导出Excel,Word,pdf的实现以及服务器端生成pdf的实现

今天无意找到了很久前的js导出excel功能,用了一下感觉不错,在网上看很多人做js导出excel,可是对表格线的导出excel总是头疼,我这里有一个简单的导出js,大家可以看看。        这...
  • shanliangliuxing
  • shanliangliuxing
  • 2011年09月20日 18:40
  • 8972
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS 如何将 HTML 页面导出为 PDF
举报原因:
原因补充:

(最多只允许输入30个字)