html2canvas+jspdf实现html网页转pdf,并解决图片跨域及分页问题

  • A+
所属分类:前端 原创 开发&源码

项目中需要将html页面转化为pdf保存下来,于是开始尝试网页转图片再转pdf的方案(即html2canvas+jspdf),经历了一番折腾,最终终于实现了html转pdf,虽然因为一些问题最终没有选择这种方案,但还是决定先记录下来...

直接上干货--源码:

需要注意的有以下几点:

  1. 这段代码是以a4纸的标准转换pdf,而且能够通过配置分页节点,达到分页可控的效果。
  2. 跨域方法:一. useCORS:true,并在后台header中添加Access-Control-Allow-Origin: *    二. 使用allowTaint: true, 然后如下图修改html2canvas.js

html2canvas+jspdf实现html网页转pdf,并解决图片跨域及分页问题

如图,修改img.crossOrigin = 'anonymous'为img.crossOrigin = '',并修改img.src = src为img.src = src + (src.contain("?") ? "&" : "?") + "h2c_t" + new Date().getTime(),或者也可以直接下载下方提供的js:

js下载(点击下面文本链接进行下载):

html2canvas.js          jspdf.js

原文博客:IT老五(html2canvas+jspdf实现html网页转pdf,并解决图片跨域及分页问题)

html2canvas+jspdf实现html网页转pdf,并解决图片跨域及分页问题
IT老五(it-lao5):关注公众号,一起源创,一起学习!
weinxin
我的微信公众号
我的微信公众号扫一扫
Liu, Thinkin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: