我正在参加「掘金·启航计划」
背景
需求：把页面打印成PDF,并自定义页眉页脚。
我：好的，一会就好。
方案一：ctrl + p
打印成PDF还不简单直接ctrl + p
配置
- 目标打印机： PDF
- 展开
更多设置- 勾选页眉页脚
如下图：
这样不就完成工作了吗？
当然没有，我们还要自定义页眉页脚，这样只是有页面页脚但是不能自定义。 如下图
页眉：
页脚：
方案二： pagedjs
Paged.js 介绍
Paged.js是一个开源库，用于在浏览器中显示分页内容并使用Web技术生成印刷书籍。
它包含一组用于 CSS 转换和碎片布局的处理程序，这些处理程序可混合填充分页媒体和生成内容CSS 模块，以及用于创建自定义属性的新处理程序的挂钩。
地址
npm 安装
- 安装
npm install pagedjs
- 应用
import { Previewer } from 'pagedjs';
let paged = new Previewer();
let flow = paged.preview(DOMContent, ["path/to/css/file.css"], document.body).then((flow) => {
console.log("Rendered", flow.total, "pages.");
})
cdn 安装
- 安装
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
- 自动运行
<script>
window.PagedConfig = {
before: () => {
return new Promise(resolve, reject) {
setTimeout(() => { resolve() }, 1000);
}
},
after: (flow) => { console.log("after", flow) },
};
</script>
- 手动触发
<script>
window.PagedConfig = {
auto: false,
after: (flow) => { console.log("after", flow) },
};
// 过一秒后触发
setTimeout(() => {
window.PagedPolyfill.preview();
}, 1000);
</script>
配置
因为pagedjs是基于css的打印媒体查询实现的，所以他支持下面的图表示由 W3C 定义的页面的 16 个边距框：
我们可以在规则中选择此边距框，在具有属性的页边距框中添加内容@page``@top-left``@bottom-right-corner``@left-middle``content
例如：
@page: right {
@top-right {
content: "My title";
}
} ;
页面计数器
- 举例
@page {
@bottom-left {
content: counter(page);
}
}
- 页码之前添加一些文本
@page {
@bottom-left {
content: "page " counter(page);
}
}
- 计算文档中的总页数
@page {
@bottom-left {
content: "Page " counter(page) " of " counter(pages);
}
}
结果如下：
页面title
@page {
@bottom-center {
content: string(title);
}
}
