html转pdf之使用Paged.js加页眉页脚

---

前言

项目中需要对一个动态渲染的长html页面进行pdf导出，导出样式要求每隔一个a4纸的高度加上头和尾，最终的效果就是导出的每一页pdf都含有完整的页眉和页脚样式。
简单的html布局和css没法实现该效果，有考虑用canvas做固定间隔的画布但方案和技术掌握尚不成熟只能待日后再尝试，最终使用Pageed.js实现了功能。

---

一、Paged.js是什么？

Paged.js是一个免费的开源JavaScript库，它在浏览器中对内容进行分页，以从任何HTML内容创建PDF输出。这意味着您可以使用HTML和CSS设计打印作品（如书籍）！

Paged.js遵循W3C发布的分页媒体标准（即分页媒体模块和分页媒体模块生成的内容）。实际上，Paged.js充当CSS模块的多边形填充，使用浏览器本身尚不支持的功能打印内容。

二、使用

1、安装npm插件

$ npm install pagedjs

2、vue组件内使用（完整代码地址请戳）

<template>
    <div class="pdf_js_container">
        <div class="headerLeft" />
        <div class="headerCenter">PDF页头/标题</div>
        <div class="headerRight" />
        <div class="footerLeft" />
        <div class="footerCenter" />
        <div class="footerRight" />
        <ul class="long_content_list">
            <li
                v-for="(_, i) in Array(24).fill('')"
                :key="i"
            >{{ `我是列表${i + 1}` }}</li>
        </ul>
    </div>
</template>

<script>
    import { Previewer } from 'pagedjs'
    export default {
        mounted () {
            this.pageHandler()
        },
        methods: {
            pageHandler () {
                // 执行pagedjs的插件方法
                const paged = new Previewer()
                paged.preview().then((flow) => {
                    console.log(`Rendered ${flow.total} pages.`)
                    window.print() // 使用浏览器自带打印功能导出pdf，这里只做导出演示，实际项目中的pdf导出需要puppeteer等达到更好的导出体验。
                })
            }
        }
    }
</script>

<style lang="less">
    @import "style";
</style>

}

3、样式文件，style.less，此处只展示部分代码，完整样式请戳

...
.pagedjs_page {
    margin: 0 auto 10px;
    background-color: #fff;

    --pagedjs-margin-top: 15mm !important;
    --pagedjs-margin-bottom: 12mm !important;
}
...

// 长列表
.long_content_list {
    width: 840px;
    padding: 20px;
    margin: 0 auto;
    background-color: #fff;
    li {
        padding: 16px 15px;
        margin-bottom: 4px;
        color: #333;
        text-align: center;
        background-color: #fffbfa;
        border: 1px solid #f0f0f0;
        font-size: 18px;
    }
}

三、效果图

长html，分页前


使用Paged.js分页后：

总结

Page.js在实现分页上功能还是比较强大的，缺点就是没有中文文档和包体积偏大，后续会探索更优方案。