为markdown导出的pdf添加页眉页脚

为Markdown导出的PDF添加页眉页脚

环境

  • vscode
  • 扩展:Markdown PDF

操作方式

  • 快捷键 Ctrl+, 打开设置
  • 搜索 "markdown-pdf"
  • 找到设置
    • 页眉: Markdown-pdf: Header Template
    • 页脚: Markdown-pdf: Footer Template

页眉插入示例内容:

此处使用base64内嵌图片(图片转base64工具:https://www.base64-image.de/

html 复制代码
<div style="display: flex; justify-content: space-between; align-items: center; font-size: 10px; margin: 0 1cm;">
    <img src="data:image/png;base64,示例base64编码图片" style="height: 30px;">
</div>
  • display: flex; 设置容器为Flex布局,使子元素可以灵活排列。
  • justify-content: space-between; 使子元素在主轴方向上平均分布,首尾元素贴近容器边缘。
  • align-items: center; 使子元素在交叉轴方向上居中对齐。
  • font-size: 10px; 设置文字大小为10像素。
  • margin: 0 1cm; 设置容器的左右边距为1厘米。
  • src="data:image/png;base64,示例base64编码图片" 使用base64编码的图片作为图片源。
  • style="height: 30px;" 设置图片高度为30像素。

页脚插入示例信息:

html 复制代码
<div style="border-top: 1px solid #000; font-size: 8px; margin: 0 1cm; padding-top: 5px;">
    <div style="display: flex; justify-content: space-between; align-items: center; line-height: 1.5; white-space: pre;">
        <span>示例公司名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;示例地址&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;示例电话号码&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;示例网站</span>
    </div>
</div>
  • border-top: 1px solid #000; 在容器顶部添加一条1像素的黑色实线边框。
  • font-size: 8px; 设置文字大小为8像素。
  • margin: 0 1cm; 设置容器的左右边距为1厘米。
  • padding-top: 5px; 设置容器顶部内边距为5像素。
  • display: flex; 同上,设置为Flex布局。
  • justify-content: space-between; 同上,使子元素在主轴方向上平均分布。
  • align-items: center; 同上,使子元素在交叉轴方向上居中对齐。
  • line-height: 1.5; 设置行高为1.5倍的字体大小。
  • white-space: pre; 保持文本中的空白符(如空格和换行),不折行。
  • span 标签用于包裹文本内容,&nbsp; 表示非断行空格,用于控制文本间距。

注意: 虽然这个插件支持HTML和CSS,但有些功能可能需要自行调整。

相关推荐
Simon_He2 小时前
这次来点狠的:用 Vue 3 把 AI 的“碎片 Markdown”渲染得又快又稳(Monaco 实时更新 + Mermaid 渐进绘图)
前端·vue.js·markdown
阿幸软件杂货间2 天前
Office转PDF转换器v1.0.py
开发语言·pdf·c#
reembarkation2 天前
使用pdfjs-dist 预览pdf,并添加文本层的实现
前端·javascript·pdf
reembarkation2 天前
vue-pdf 实现blob数据的预览
javascript·vue.js·pdf
Simon_He2 天前
一款适用于 Vue 的高性能流式 Markdown 渲染器,源自我们的 AI 聊天机器人
前端·vue.js·markdown
Light602 天前
领码方案|Linux 下 PLT → PDF 转换服务超级完整版:异步、权限、进度(一气呵成)
linux·spring boot·pdf·gpcl6/ghostpcl·s3/oss·权限与审计·异步与进度
伟贤AI之路2 天前
【分享】中小学教材课本 PDF 资源获取指南
人工智能·pdf
xiezhr2 天前
一款带有AI功能的markdown工具
ai·markdown·效率工具·笔记工具
东风西巷3 天前
PDFgear:免费全能的PDF处理工具
前端·pdf·软件需求
Neverfadeaway3 天前
Jupyter Notebook 介绍、安装及使用
jupyter·markdown·ipython·jupyter详解·jupyter快捷键