JavaScript 实现html导出为PDF文件

本文介绍了如何在前端项目中实现将HTML内容导出为PDF文件的需求。主要思路是利用html2canvas.js将HTML元素转为图片,再通过jspdf.js将图片整合成PDF。提供了相关代码示例。
摘要由CSDN通过智能技术生成

        相信各位前端工程狮们在一些报表项目,管理系统项目中都会遇到在这样的需求:申请报、表格、简历等等图文信息有导出为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

评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值