html2pdf-前端转pdf，并上传

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并下载下来

1. 下载js文件，并在页面中引入js文件

• html2pdf.bundle.min.js
• 项目github地址

<script src="html2pdf.bundle.min.js"></script>

2. 修改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>

3. 实现javascript方法

<script>
    function toPdf() {
        var element = document.getElementById('a');
        html2pdf(element);
    }
</script>

方法很简单，先根据id找到dom元素，然后调用html2pdf(element)方法，把dom作为参数传递进去

将pdf文件存储到后台

1. 先获取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>

2. 上传到服务器

上1步已经得到了pdf文件的base64编码的字符串，然后通过http客户端把字符串发送到后台进行保存就行了。

可以使用jquery的ajax方法来实现前后台的交互