3932dad0-05e4-409f-86bc-1c3100aee925.PNG
今天要解决的问题是, 将页面上的一部分内容转换成 PDF, 并且存储起来. 如上图所示, 我们的内容包括了文字, 图片, 表格. 表格甚至还有边框和背景颜色等样式的设置.
初始 html 代码如下:
- <h1 > 标题 </h1>
- <img src="demo.jpg" alt=""height="100px">
- <table border="1" cellpadding="0" cellspacing="0">
- <tr style="background-color: red">
- <td > 表格 1</td>
- <td > 表格 1</td>
- <td > 表格 1</td>
- <td > 表格 1</td>
- <td > 表格 1</td>
- </tr>
- <tr>
- <td > 表格 1</td>
- <td style="font-size: 200%;color: blue"> 表格 1</td>
- <td > 表格 1</td>
- <td > 表格 1</td>
- <td > 表格 1</td>
- </tr>
- <tr>
- <td > 表格 1</td>
- <td > 表格 1</td>
- <td > 表格 1</td>
- <td > 表格 1</td>
- <td > 表格 1</td>
- </tr>
- </table>
先实现将页面内容转换成 PDF 并下载下来
下载 JS 文件, 并在页面中引入 JS 文件
html2pdf.bundle.min.JS
项目 GitHub 地址
<script src="html2pdf.bundle.min.js"></script>
修改 HTML, 增加一个执行按钮, 将要转换成 PDF 的部分用一个 div 包裹起来, 并且给 div 一个 id 属性
- <button onclick="toPdf()"> 转 PDF</button>
- <div id="a">
- <h1 > 标题 </h1>
- <img src="demo.jpg" alt=""height="100px">
- <table border="1" cellpadding="0" cellspacing="0">
- <tr style="background-color: red">
- <td > 表格 1</td>
- <td > 表格 1</td>
- <td > 表格 1</td>
- <td > 表格 1</td>
- <td > 表格 1</td>
- </tr>
- <tr>
- <td > 表格 1</td>
- <td style="font-size: 200%;color: blue"> 表格 1</td>
- <td > 表格 1</td>
- <td > 表格 1</td>
- <td > 表格 1</td>
- </tr>
- <tr>
- <td > 表格 1</td>
- <td > 表格 1</td>
- <td > 表格 1</td>
- <td > 表格 1</td>
- <td > 表格 1</td>
- </tr>
- </table>
- </div>
实现 JavaScript 方法
- <script>
- function toPdf() {
- var element = document.getElementById('a');
- html2pdf(element);
- }
- </script>
方法很简单, 先根据 id 找到 dom 元素, 然后调用 html2pdf(element) 方法, 把 dom 作为参数传递进去
将 PDF 文件存储到后台
先获取 PDF 文件
- <script>
- function toPdf() {
- var element = document.getElementById('a');
- // html2pdf(element);
- html2pdf().from(element).outputPdf().then(function (t) {
- // 得到 PDF 文件字节码
- console.log(t)
- // 字节码转 base64
- var base64_pdf=btoa(t)
- console.log(base64_pdf)
- })
- }
- </script>
上传到服务器
上 1 步已经得到了 PDF 文件的 base64 编码的字符串, 然后通过 http 客户端把字符串发送到后台进行保存就行了.
可以使用 jQuery 的 Ajax 方法来实现前后台的交互
来源: http://www.jianshu.com/p/de18e66cbfed