前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Javascript-HTML to PDF

Javascript-HTML to PDF

作者头像
szhshp
发布2022-08-21 15:55:03
1.1K0
发布2022-08-21 15:55:03
举报

Background

某个作死的导出 PDF 的业务需求,要求兼容 IE 和 Chrome

Requirement

  • jspdf.js1
    • V1.0.272
    • 此版本支持 IE10 IE10+ Chrome
    • 最新版本可能出现 IE10 兼容问题

Usage

一开始以为只是简单调用一套代码就行,后来发现根据不同浏览器还需要不同的适配

Chrome

代码语言:javascript
复制
	var pdf = new jsPDF('p', 'mm');
	pdf.addHTML(document.body, function() {
	    pdf.output('datauri');
	});

IE10 IE11

代码语言:javascript
复制
    var pdf = new jsPDF('p', 'mm');
    pdf.addHTML(document.body, function() {
        pdf.save('output.pdf');
    });

IE9?

暂时没有找到 IE9 可以进行导出 PDF 的方法,考虑可以使用截图图片进行替代

截图需要另外一个库:html2canvas.js2,注意必须使用版本为V0.4.1才能做到 IE9 兼容

试过几种自动下载图片的办法,最终发现使用<a>然后 JS 点击完全没有效果,也有可能和特殊的运行环境相关,最终还是决定显示一张图然后手动下载

代码语言:javascript
复制
	html2canvas($("body"), {
	  onrendered: function(canvas) {
	     var url = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
	     var img = document.createElement('img');
	     img.src = url;
	     img.download = 'output.jpg';
	     $("body").append(img);
	 }
	});

IE8????

特么这年头还有人用 IE8 的啊?

在 IE8 总是出现缺少部分方法的兼容错误……应该也可以使用特定的 pollyfill 来解决……

References

  1. JSPDF
  2. html2canvas
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016-06-23,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Background
  • Requirement
  • Usage
    • Chrome
      • IE10 IE11
        • IE9?
          • IE8????
          • References
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档