a11121112111a的博客

好记性不如烂笔头

JS 如何将 HTML 页面导出为 PDF

栗子

准备

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

新建HTML页面文件

头部引入刚才所下载的 jspdf 和 html2canvas,再导入主要的 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/jpeg 和 doc.addImage(...,'JPEG',...) 的参数 JPEG务必一致 
而且,我也建议这两个参数分别写 image/jpeg 和 JPEG 。 
因为其他参数例如 image/png 等,导出pdf后内容为空。 
这也是困扰了我一天的问题。(我猜测因为html2canvas输出的图片base64数据是image/jpeg格式,如果写其他格式会导致渲染失败)

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

阅读更多
文章标签: 页面转pdf
个人分类: 工具 js
上一篇IntelliJ IDEA 常用快捷键列表及技巧大全
下一篇导入Excel表格持久化到数据库
想对作者说点什么? 我来说一句

jspdf.jar 通过jshtml转成pdf

2013年03月22日 17KB 下载

Web页面生成PDFhtml to pdf

2017年04月17日 26.47MB 下载

没有更多推荐了,返回首页

关闭
关闭