纯前端将网页导出pdf文件

本文介绍了如何使用jspdf和html2canvas插件将网页内容导出为PDF文件,强调了这两个工具的优点,并分享了在实际操作中遇到的两个坑:元素未附加到Document的问题和onrendered函数不执行的问题,提供了相应的解决办法。另外,对于页面滚动导致PDF导出不完整的情况,提出了将滚动条置顶再导出的临时解决方案。
摘要由CSDN通过智能技术生成

使用插件:jspdf +  html2canvas,html2canvas将节点绘制成图片,然后jspdf再导出。

优点:可以指定导出DOM,配置贼简单(其实浏览器右键-->打印-->另存为pdf文件也挺方便哒,但是很多人不知道呀)。

引入js文件(快夸我,别人都是让你们自己去网上找,给的本地文件引用地址):   

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.js"></script>

如果想将上面的文件弄成本地的,直接点击地址访问,然后单击右键另存为就好啦。

html信息:

导出按钮
<button onclick="ExportPDF('echartsCavans')">导出</button>

导出DOM
<div id="echartsCavans" ref="echartsCavans" class="layui-form">
    ......
</div>

接下来是打印方法:

function ExportPDF(id) 
  • 10
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 11
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值