JS 如何将 HTML 页面导出为 PDF

标签: 页面转pdf
9人阅读 评论(0) 收藏 举报
分类:

栗子

准备

创建项目文件夹,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是否成功,总之博主成功了。

查看评论

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

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

用js 将当前html页面导出pdf

引入的js 1. function downloadPdf(){ 2. html2canvas($('#appmsg'), { //appmsg ...
  • RD_moon
  • RD_moon
  • 2018-01-07 16:45:36
  • 226

将HTML页面部分内容导出为PDF

之前写了一篇博文 JS 如何将 HTML 页面导出为 PDF 。 当时只是自己有个需求,只是导出一页PDF,写个了示例。 之后就有同学私信我问我怎么导出多页PDF。好吧,其实这些看文档画画图...
  • Aliloke
  • Aliloke
  • 2017-11-21 16:46:11
  • 547

jspdf.jar 通过js将html转成pdf

  • 2013年03月22日 11:46
  • 17KB
  • 下载

IE下用JavaScript将HTML导出为Word、Pdf

 最近升级公司内部系统发文章的功能,涉及到将文章内容导出为html、word、pdf,系统多用于IE环境下,并且公司电脑都预装了office,所以导出暂时采用客户端的方式。        页面...
  • fanwenyuan_fwy
  • fanwenyuan_fwy
  • 2017-02-09 16:06:57
  • 1142

js实现html下载到本地并生成pdf文件

1.前段时间需要实现一个页面下载到本地并生成pdf格式的文件的需求。 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&...
  • qq_20353887
  • qq_20353887
  • 2017-03-06 13:54:00
  • 2687

js实现html页面转为pdf下载

这是用js实现的html页面转为pdf进行下载当前的网页,需要用到jsPDF和html2canvas插件,渲染过程中根据服务器的性能而定,图片比较多的话,就会渲染的比较慢。...
  • SQ_Bang
  • SQ_Bang
  • 2017-09-22 17:11:48
  • 2881

利用js导出Web页面内容到Word、Excel

  • 2016年07月28日 22:50
  • 28KB
  • 下载

动态生成的html页面转pdf并且打印预览

文章说明 程序的功能:        通过js动态生成html页面并将该页面传送到后台转成pdf,再通过前台将pdf打印预览 先大约讲述一下具体实现过程 1、在js页面将你自己需要拼装好html页面通...
  • a1968640005
  • a1968640005
  • 2017-07-11 09:00:43
  • 3159

教你怎么将pdf转换成html格式

怎么把PDF格式的文件转换成html格式的呢?平时为了方便阅读可能会将文件内容做成PDF格式的档案给大家浏览,但是有时候由于某些原因需求也会将PDF文件内容改成网页形式的让大家来浏览,怎么做呢?怎么将...
  • pdfhtml
  • pdfhtml
  • 2015-09-08 14:56:59
  • 872
    个人资料
    等级:
    访问量: 336
    积分: 84
    排名: 151万+
    文章存档
    最新评论