1 Star 0 Fork 0

pantao / html-pdf-presentation

Create your Gitee Account
Explore and code with more than 6 million developers,Free private repositories !:)
Sign up
Clone or Download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

HTML 制作演示文档

一个演示文档,一般包括:

  • 首页
  • 内容页(标题 + 内容)
  • 结束页

可以发现,内容页的样式都是一致的,包括:

  • 页眉
  • 标题
  • 内容
  • 页脚

这四项垂直排列。内容一般分栏,水平排列。使用 HTML + CSS 可以描述样式。

布局

同时预设所有边距为0,利用 CSS @page 设置打印尺寸,margin 设为0.

flex 布局,一个水平flex,一个垂直flex,就可以解决绝大部分的布局。因此定义了标签section-f, flex-v, flex-h。其中section-f用于定义打印大小的页面。

图片

图片的要求是:尽可能大而不变形,因此利用background属性可以实现。因此定义了标签 img-c 居中显示图片。

页脚

在需要使用页脚的页面插入空白的 <footer></footer>,其内容填充完全由 js 完成。

页眉

应该与页脚类似,使用 header 标签,但是我做 PPT 很少使用页眉,因此先不实现。

生成 PDF

使用 Google-Chrome 打印(chromium 也可以),得到横向 A4 大小的文档。

google-chrome --headless --disable-gpu --print-to-pdf=out.pdf index.html --print-to-pdf-no-header

Windows 下 chrome 需要额外添加 --enable-logging 才能正常使用 headless 模式。

使用 Python 提供跨平台支持。

Repository Comments ( 0 )

Sign in to post a comment

About

使用HTML快速创建PDF演示文档 expand collapse
JavaScript and 6 more languages
GPL-2.0
Cancel

Releases

No release

Contributors

All

Activities

Load More
can not load any more
1
https://gitee.com/pantao1227/html-pdf-presentation.git
git@gitee.com:pantao1227/html-pdf-presentation.git
pantao1227
html-pdf-presentation
html-pdf-presentation
master

Search