为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,但有些功能可能需要自行调整。

相关推荐
FreeBuf_10 小时前
微软365 PDF导出功能存在本地文件包含漏洞,可泄露敏感服务器数据
服务器·microsoft·pdf
好柿会發生14 小时前
markdown 渲染自定义组件
vue.js·markdown
熊出没19 小时前
Vue前端导出页面为PDF文件
前端·vue.js·pdf
最懒的菜鸟20 小时前
MinerU将PDF转成md文件,并分拣图片
人工智能·pdf
seepine20 小时前
VSCode + Md Editor 插件, Typora 的平替方案
markdown·visual studio code
开开心心_Every1 天前
便捷的电脑自动关机辅助工具
开发语言·人工智能·pdf·c#·电脑·音视频·sublime text
用什么都重名1 天前
MinerU:高效智能PDF文档解析工具完全指南
人工智能·python·pdf·mineru·makedown
Xiaouuuuua1 天前
一个简单的脚本,让pdf开启夜间模式
java·前端·pdf
码路工人1 天前
【Markdown-01】初识 Markdown——你的第一份文档
markdown
码路工人1 天前
【Markdown-00】前言:为什么是 Markdown?
程序员·markdown·电子书