惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
Apple Machine Learning Research
Apple Machine Learning Research
Last Week in AI
Last Week in AI
Blog — PlanetScale
Blog — PlanetScale
V
Visual Studio Blog
月光博客
月光博客
博客园 - 三生石上(FineUI控件)
博客园 - Franky
IT之家
IT之家
博客园 - 叶小钗
Engineering at Meta
Engineering at Meta
The GitHub Blog
The GitHub Blog
雷峰网
雷峰网
腾讯CDC
博客园 - 聂微东
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
V
V2EX
人人都是产品经理
人人都是产品经理
MongoDB | Blog
MongoDB | Blog
大猫的无限游戏
大猫的无限游戏
Martin Fowler
Martin Fowler
宝玉的分享
宝玉的分享
博客园_首页
G
Google Developers Blog

szhshp 的第三边境研究所

假设, AI 把我代替的那一刻真的到来 | szhshp 的第三边境研究所 小傻瓜都能懂的 AstrBot QQ 机器人集成 MCP 功能实战指南 | szhshp 的第三边境研究所 《智人之上: 从石器时代到 AI 时代的信息网络简史》阅读笔记 | szhshp 的第三边境研究所 iPadOS 26 无法设置空间场景图片壁纸的解决方法 | szhshp 的第三边境研究所 《一路云海》(终) | szhshp 的第三边境研究所 《一路云海》(四): 如何不按套路旅行 | szhshp 的第三边境研究所 《一路云海》(三): In Ya Mellow Tone | szhshp 的第三边境研究所 《一路云海》(二): 关西世博参观纪实 | szhshp 的第三边境研究所 《一路云海》(一): 新的征程 | szhshp 的第三边境研究所 2025 大阪世博会 [ 3 天前-先到先得 ] 阶段 场馆预约必中独家攻略 | szhshp 的第三边境研究所 Hackathon 随想 | szhshp 的第三边境研究所 一杯双皮奶 | szhshp 的第三边境研究所 Armbian + CasaOS + NAS 配置指南 | szhshp 的第三边境研究所 Docker 构建镜像报错: error getting credentials - err: exit status 1, out: `` | szhshp 的第三边境研究所 Disqus RIP! 论过高的维护成本如何治疗固执的坏习惯 | szhshp 的第三边境研究所 炸弹猫桌游变体规则 | szhshp 的第三边境研究所 《小岛经济学》阅读笔记 | szhshp 的第三边境研究所 《金钱心理学》阅读笔记 | szhshp 的第三边境研究所 为知笔记 RIP: 迁移剩余的笔记 | szhshp 的第三边境研究所 2025 博客第十年展望 - 再见我的过去 | szhshp 的第三边境研究所 我在独立游戏里面致敬的作品 | szhshp 的第三边境研究所 《How to make thing faster》阅读笔记 | szhshp 的第三边境研究所 《The Art of Clean Code》阅读笔记 | szhshp 的第三边境研究所 《Clean Architecture: A Craftsman Guide to Software Structure and Design》阅读笔记 | szhshp 的第三边境研究所 《How AI Works》阅读笔记 | szhshp 的第三边境研究所 游戏策划废案 - Project Uranus | szhshp 的第三边境研究所 游戏策划废案 - Project X | szhshp 的第三边境研究所 人生第一款独立游戏开发复盘 | szhshp 的第三边境研究所 Trap of Life | szhshp 的第三边境研究所 如果我用手搓了个暗物质雏形 | szhshp 的第三边境研究所
Javascript-HTML to PDF | szhshp 的第三边境研究所
2016-06-23 · via szhshp 的第三边境研究所

Meta

目录

Background

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

Requirement

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

Usage

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

Chrome

	var pdf = new jsPDF('p', 'mm');
	pdf.addHTML(document.body, function() {
	    pdf.output('datauri');
	});

IE10 IE11

    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点击完全没有效果,也有可能和特殊的运行环境相关,最终还是决定显示一张图然后手动下载

	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