angular8中，用html2canvas+jspdf 实现页面下载pdf（解决了中文问题和页边距问题）

本文链接：https://blog.youkuaiyun.com/weixin_41875025/article/details/107617945

本文介绍如何在Angular8项目中利用html2canvas和jspdf库将页面内容转换为PDF，并解决中文显示和页边距问题。首先通过npm安装两个依赖库，然后在HTML中设置必要的配置，最终实现可下载的PDF文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下载html2canvas 和jspdf
npm install html2canvas --save
npm install jspdf --save

html:

<button (click) = "downLoadJspdfs()">downLoadJspdf</button>
<div id="downLoadJspdf">

<h2>人生如戏</h2>
<p>“旦生净末且端详，如戏人生路正长。”</p>
<p>人生犹如一场大戏，没法彩排，没有剧本，每天都是现场直播，充斥着惊吓和惊喜。</p>
<p>风风雨雨中，我们身兼数职，是导演，是编剧，亦是演员；</p>
<p>岁月更迭中，我们角色转换，或为父为夫为子，或为母为妻为女。</p>
<p>戴上面具，酸楚往肚子里咽，眼泪往心里流，却努力微笑着，偶尔骗骗别人，偶尔骗骗自己。</p>
<p>经历再多的狗血剧情，也只有迎难而上，累，并快乐着。</p>
<p>一路走来，责任很大，压力很大，时不时出现些小插曲，让我们不断修炼着内心，磨炼着演技。</p>
<p>这场大制作中，有人把它演成了凄惨的悲剧，有人把他过成了鸡飞狗跳的闹剧，但更多人，只想把它变成平凡且幸福的喜剧。</p>
<p>酷暑寒冬里，起早贪黑，摸爬滚打，踏踏实实向前，不再在意别人的评论，不再等待别人的认可。</p>
<p>站在属于自己的舞台上，付出真心