JavaScript 实现html导出为PDF文件

        相信各位前端工程狮们在一些报表项目,管理系统项目中都会遇到在这样的需求:申请报、表格、简历等等图文信息有导出为PDF文件。下面是记录我在项目中完成该需求的代码dome,发布出来也是希望对大家有些帮助。

1,整体思路

将HTML元素打印或导出为PDF文件,无非就是提取元素页面内容,然后转化为图片,将图片保存为PDF文件。

2,准备工作

将HTML元素转化为图片:html2canvas.js  插件;

<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>

导出为PDF文件:jspdf.js插件:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>

 3,dome

HTML:

    <button id="btn">导出为PDF文件</button>
    <div id="pdfDom">
        <table>
            <th></th>
        </table>
        <ul id="box"></ul>
    </div>

JavaScri

  • 6
    点赞
  • 29
    收藏
    觉得还不错? 一键收藏
  • 8
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值